使用html和Javascript选择国家和州

我已经在Liferay中应用了view.jsp中的逻辑，根据从国家下拉列表中选择的国家，在国家下拉列表中显示国家列表。我使用html和java脚本实现了从下拉列表中显示所选国家的状态下拉列表的目标。目前，当我第一次加载表单时，将显示国家和州标签以及下拉列表。“状态”下拉列表最初为空。然后，当我选择国家（例如：美国）时，状态下拉列表将更改为与美国相关的状态列表，该列表按预期工作。但是，我不想在加载表单时首先显示“状态”下拉列表和“状态”标签，因为它将是空的，并且在“国家”下拉列表中将仅选择“选择国家”选项。这对我不起作用。你知道我应该怎么做才能使状态标签和下拉列表在表单加载时首先显示，并且仅在从“国家”下拉列表中选择国家时才显示状态下拉列表吗

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

<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>

---

您的代码很接近，但由于变量名中的一些不一致，它无法运行。例如，onchange事件绑定到countryChange，但函数名为countryChange。将脚本放入某种验证器中是一个好主意，比如分析代码无法按预期工作的原因

经过几次调整，这些不一致性得到了解决，现在它的运行似乎如预期的那样 HTML:

JS:

---

您的代码很接近，但由于变量名中的一些不一致，它无法运行。例如，onchange事件绑定到countryChange，但函数名为countryChange。将脚本放入某种验证器中是一个好主意，比如分析代码无法按预期工作的原因

经过几次调整，这些不一致性得到了解决，现在它的运行似乎如预期的那样 HTML:

JS:

---

你有很多拼写错误。看看这个：

我还将stateLabel和stateId元素的初始显示设置为“无”

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

---

你有很多拼写错误。看看这个：

我还将stateLabel和stateId元素的初始显示设置为“无”

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

---

我注意到你用liferay标记了它，你是否包含/使用jquery？可能的重复我注意到你用liferay标记了它，你是否包含/使用jquery？可能的重复正是我所缺少的。我在上面提供的代码中添加了下面的代码，它成功了：声明：谢谢！！！这正是我所缺少的。我在上面提供的代码中添加了下面的代码，它成功了：声明：谢谢！！！

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