Question

我已经在Liferay中的view.jsp中应用了逻辑，以根据从Country下拉列表中选择的Country显示State下拉列表中的状态列表。我已经使用html和java脚本来实现这个目标，即从下拉列表中显示所选国家/地区的状态下拉列表。目前，当我第一次加载表单时，将显示带有下拉列表的Country和state标签。状态下拉首先是空的。然后，当我选择国家/地区时，示例：USA，状态下拉列表将更改为与USA正常工作的状态列表。但是，我想在窗体加载时不显示状态下拉和状态标签，因为它将为空，并且只有在“国家/地区”下拉列表中选择“选择国家/地区”选项。这不适合我。任何想法我应该做什么来制作州标签和下拉以在表格加载时首先显示，并且仅在从国家/地区下拉菜单中选择国家时显示州下拉列表？

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

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

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

使用html和Javascript进行国家/地区和州选择

2 个答案: