Question

我有一个用于填充状态下拉列表的工作代码，其中包含一个基于国家下拉列表选择值的数组，我想添加类似Jquery show() and hide()的内容来隐藏状态下拉如果国家不是包含在"countryStateArray"数组中，并在填充状态列表时执行相反的操作

这是我在Fiddle上的代码

http://jsfiddle.net/Av2d7/

谢谢

Answer 1

首先，您应该将数组数组更改为对象。这样可以更容易地通过相关键找到状态：

var countryStateArray = {
    'US': [
        ['', 'State/Province'],
        ['AL', 'Alabama'],
        ['AK', 'Alaska'],
        /* And so on... */
    ],
    'CA': [
        ['', 'State/Province'],
        ['AB', 'Alberta'],
        ['BC', 'British Columbia'],
        ['MB', 'Manitoba'],
        /* And so on... */
    ],
    'AU': [
        ['', 'State/Province'],
        ['ACT', 'Australian Capital Terr.'],
        ['NSW', 'New South Wales'],
        /* And so on... */
    ]
};

然后，您可以使用#countryId的值来查找对象中的国家/地区密钥。如果它存在，您可以遍历其中包含的状态并将它们附加到#stateId并显示它。如果密钥不存在，您可以隐藏状态选择。

当您使用jQuery时，您应该使用它来附加您的事件，因为它更好地分离了在HTML中使用过时的on*属性的问题：

#stateId { display: none; }

function setStates() {
    var $country = $('#countryId');
    var $state = $('#stateId');
    var countryId = $country.val();

    if (countryStateArray[countryId]) {
        // states exist for this country, append them and show the select
        for (var i = 0; i < countryStateArray[countryId].length; i++) {
            var state = countryStateArray[countryId][i];
            $('<option />', { value: state[0], text: state[1] }).appendTo($state);
        }
        $state.show();
    } else {
        // no states, empty the select and hide it
        $state.empty().hide();
    }
}

setStates(); // onload
$('#countryId').change(setStates); // onchange

Example fiddle

填充和隐藏/显示状态根据国家/地区选择的值下拉

1 个答案: