国家和州选择使用HTML和Javascript [英] Country and State selection using html and Javascript

问题描述

我已经在Liferay的view.jsp中应用逻辑，根据从国家下拉菜单中选择的国家下拉菜单显示状态下拉菜单。我已经使用html和java脚本来实现从下拉列表中显示所选国家的状态下拉的目标。目前，当我第一次加载表单时，国家和国家标签都显示下拉菜单。起初状态下降是空的。然后，当我选择国家，例如：美国，状态下拉更改为与美国相关的状态列表，其按照预期工作。但是，当表单被加载时，我不想显示状态下拉和状态标签，因为它将是空的，并且只有在国家下拉菜单中选择选择国家选项。这不适合我。任何想法我应该怎么做国家的标签，并下拉下来显示在表单加载时，只是显示状态下拉列表只有当国家从国家下拉菜单中选择

I have applied the logic in view.jsp in Liferay to show the state list on State drop down based on the Country selected from the Country drop down. I have used html and java script to achieve this goal of showing the state drop down for the selected country from drop down list. Currently, when I first load the form, both of the Country and the state label with drop down is displaying. The state drop down is empty at first. Then when I select country, Example: USA, state drop down is changed to the state list related to USA which is working as expected. But, I want to not show the state drop down and State label at first when form is loaded as it will be empty and there will be "Select Country" option only selected in Country drop down. This is not working for me. Any idea what should I do to make State label and drop down to show at first when form loads and just to show state drop down list only when the country is selected from Country drop down?

下面是我的html和java脚本代码：

Below is the html and java script code that I have:

<select name="<portlet:namespace/>Country" id="countryId" onchange="javascript:countryChange()">
        <option value="0">Select Country</option>
        <option value='US'>United States</option>
        <option value='CA'>Canada</option>
</select>
<label id="stateLabel">State:</label>  
<select name="<portlet:namespace/>State" id="stateId">
</select>

<!--Country and State Change Javascript-->
<script>
function CountryChange() {
    var countryState = [
        [
            'US', [
            ['', 'State/Province'],
            ['AL', 'Alabama'],
            ['AK', 'Alaska'],
            ['AZ', 'Arizona'],
            ['AR', 'Arkansas'],
  ], ],
[
            'CA', [
            ['', 'State/Province'],
            ['AB', 'Alberta'],
            ['BC', 'British Columbia'],
            ['MB', 'Manitoba'],
            ['NB', 'New Brunswick'],
  ]]
   ];

    var countryElement = document.getElementById('countryId');
    var stateElement = document.getElementById('stateId');
    var stateLabelElement = document.getElementById('stateLabel');

if (countryElement && stateElement) {
        var listOfState = [
            ['XX', 'None']
        ];

        var currentCountry = countryElement.options[countryElement.selectedIndex].value;
        for (var i = 0; i < countryState.length; i++) {
            if (currentCountry == countryState[i][0]) {
                listOfState = countryState[i][1];
            }
        }
        if (listOfstate.length < 2) 
            {
            stateElement.style.display = 'none';
            stateLabelElement.style.display = 'none';
            }
    else 
        {
        stateElement.style.display = 'inline';
        stateLabelElement.style.display = 'inline';
        }
        var selectedState;
        for (var i = 0; i < stateElement.length; i++) {
            if (stateElement.options[i].selected === true) {
                selectedState = stateElement.options[i].value;
            }     
        }
        stateElement.options.length = 0;
        for (var i = 0; i < listOfState.length; i++) {
            stateElement.options[i] = new Option(listOfState[i][1], listOfState[i][0]);
            if (listOfState[i][0] == selectedState) {
                stateElement.options[i].selected = true;
            }    
        }      
    }
}
</script>

推荐答案

你有很多拼写错误。看看这个： https://jsfiddle.net/jj8we58t/1/

You had a lot of mis-spellings. Check this out: https://jsfiddle.net/jj8we58t/1/

我还为设置了初始 display 为 none > stateLabel 和 stateId 元素。

I also set the initial display to none for the stateLabel and stateId elements.

<label id="stateLabel" style="display: none">State:</label>  
<select name="<portlet:namespace/>State" style="display: none" id="stateId">

这篇关于国家和州选择使用HTML和Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！