选择不同的下拉列表后填写下拉列表
选择不同的下拉列表后填写下拉列表
提问于 2018-02-15 04:41:22
我正在尝试想出一种方法，根据在不同的下拉列表中选择的值自动填充下拉列表。
假设我有一个州/省的下拉列表。根据选择的值，它将在Country下拉列表中填写为USA / CAN。
<select name="formState" class="form-control modeldropdown" id="state" required>
<option value="">State / Province</option>
<option value="">--- United States ---</option>
<option value="AL">Alabama - AL</option>
...
<option value="MH">Marshall Islands - MH</option>
<option value="">--- Canada ---</option>
<option value="AB">Alberta - AB</option>
<option value="BC">British Columbia - BC</option>
...
</select>相反的方式会更容易(选择一个国家，然后过滤) --为此，我会这样做
var jsonText = '{"USA":{ '
+ '"Alabama": "Alabama",'
+ '"Alaska": "Alaska",'
+ '},'
+ '"CAN":{'
+ '"Alberta": "Alberta",'
+ '}}';
var json = JSON.parse(jsonText);然后根据选择的国家对其进行过滤，但有没有一种简单的方法可以颠倒过来？
我想要做到这一点的唯一方法是检查该值是否为：
var state = $('#state').val();
if ( state == 'Alabama' || state == 'Alaska'...)
...回答 3
Stack Overflow用户
回答已采纳
发布于 2018-02-15 04:47:59
您可以创建一个从州/省映射到国家的对象：
const countryOfState = {
'Alabama' : 'USA',
'Alberta' : 'CAN'
};
let state = $('#state').val();
if (countryOfState[state] === 'USA') {
...Stack Overflow用户
发布于 2018-02-15 05:02:52
您可以使用indexOf检查元素是否存在于数组中，如下所示：
const states = {
'USA': ['Alabama'],
'CAN': ['Alberta']
};
function getCountry(state) {
for (let country in states) {
if (states[country].indexOf(state) >= 0) {
return country;
}
}
return null;
}
console.log(getCountry('Alberta')); //CANStack Overflow用户
发布于 2018-02-15 05:32:02
下面是使用optgroup的一种略微不同的方法，我认为它更适合您的数据。我还利用了data attributes
$('#state').change(function() {
var optGroup = $(this.options[this.selectedIndex]).closest('optgroup');
var label = $(optGroup).prop('label');
var cCode = $(optGroup).data('countrycode');
$('#country').html('<option value="'+ cCode + '">' + label + '</option>');
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="formState" class="form-control modeldropdown" id="state" required>
<option value="">State / Province</option>
<optgroup label="United States" data-countryCode="USA">
<option value="AL">Alabama - AL</option>
<!-- ... -->
<option value="MH">Marshall Islands - MH</option>
</optgroup>
<optgroup label="Canada" data-countryCode="CA">
<option value="AB">Alberta - AB</option>
<option value="BC">British Columbia - BC</option>
</optgroup>
</select>
<select id="country" name="country"><option disabled selected>Please Select State</option></select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48795825
复制相关文章
相似问题
腾讯云开发者
