javascript - 使用 html 和 Javascript 选择国家和州

标签 javascript html liferay liferay-6

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

最佳答案

你有很多拼写错误。检查一下:https://jsfiddle.net/jj8we58t/1/

我还将 stateLabelstateId 元素的初始 display 设置为 none

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

关于javascript - 使用 html 和 Javascript 选择国家和州,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35135722/

相关文章:

html - 水平菜单的问题

php - 这会让搜索引擎为我的内容编制索引吗?

javascript - 使用 + 和 - 图标折叠/展开表格

jquery - 不确定状态的复选框在 safari 中不起作用(兼容性问题)

javascript - 将 greensock 与 browserify 一起使用

javascript - 悬停离开动画

tomcat - Liferay 发布结构 id 已经存在

mysql - 如何从mysql数据库编辑liferay guest和site member的权限?

javascript - 在继续下一行之前,如何确保 promise 已得到解决?

javascript - 如何从 background.js 访问内部资源