使用 html 和 Javascript 选择国家和州

Question

我已在 Liferay 中应用 view.jsp 中的逻辑，以根据国家/地区下拉列表中 select 编辑的国家/地区下拉列表显示州列表。我使用 html 和 java 脚本来实现从下拉列表中显示 selected 国家/地区的状态下拉列表的目标。目前，当我第一次加载表单时，带有下拉列表的国家和州标签都在显示。状态下拉列表起初是空的。然后当我 select 国家时，例如：美国，州下拉列表更改为与美国相关的州列表，该列表按预期工作。但是，我不想在加载表单时首先显示州下拉列表和州标签，因为它将是空的，并且只有 "Select Country" 选项 selected 在国家/地区下拉列表中。这对我不起作用。知道我应该怎么做才能制作州标签并在表单加载时首先显示下拉列表，并且仅当国家/地区 select 从国家/地区下拉列表编辑时才显示州下拉列表？

下面是我的 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>

Answer 1

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

经过一些调整并消除了那些不一致之处，它现在似乎可以按预期运行 HTML:

<select name="<portlet:namespace/>Country" id="countryId" onchange="window.CountryChange()">
  <option value="0">Select Country</option>
  <option value='US'>United States</option>
  <option value='CA'>Canada</option>
</select>
<div id="stateField" style="display:none">
  <label id="stateLabel">State:</label>
  <select name="<portlet:namespace/>State" id="stateId">
  </select>
</div>

JS:

   window.CountryChange = function () {
      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');
      var stateFieldElement = document.getElementById('stateField');

      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) {
          stateFieldElement.style.display = "none";
        } else {
          stateFieldElement.style.display = "inline-block";
        }
        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;
          }
        }
      }
    }

Answer 2

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

我还将 stateLabel 和 stateId 元素的初始 display 设置为 none。

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

使用 html 和 Javascript 选择国家和州

Country and State selection using html and Javascript

javascript

html

liferay

liferay-6