所以我正在创建一个下拉列表。我从我的 3 个一般位置的数据库中检索数据。国家、地区/州/省和城市。所以我有 3 个下拉菜单(每个一般位置都有一个)。And when a Country is selected I want only the regions within that Country to be an option. 我将所有地区都放在选择标签中,因为我不知道用户将选择哪个国家,并且我试图避免 AJAX 调用来使用 PHP。
我当前的 HTML:
<select id='countrySelect'>
<option value='0'>Select Country</option>
<option value='1'>United States</option>
<option value='2'>Canada</option>
</select>
<select id='regionSelect' disabled>
<option value='0'>Select Region/State</option>
<option value='1' data-id='1'>California</option>
<option value='2' data-id='2'>British Columbia</option>
</select>
<select id='citySelect' disabled>
<option value='0'>Select City/Area</option>
<option value='1' data-id='1'>San Fransisco</option>
<option value='2' data-id='1'>Los Angeles</option>
<option value='3' data-id='2'>Victoria</option>
<option value='4' data-id='2'>Vancouver</option>
</select>
该值对应于数据库中该位置的概念(国家、地区和城市都是它们自己的数据库)。Data-id 是指该选项所在位置的 id。例如:California 的 data-id 为 1,表示它在国家 1。而美国的值为 1,因此加利福尼亚在美国。它适用于地区的城市。但是当用户点击美国时。我希望不列颠哥伦比亚省不被看到(不被禁用,因为当它们被禁用时,它们仍然可见,只是不可选择。我不希望它们被删除,因为它们永远消失了)。我想要一种跨浏览器的方式来隐藏它们,如果他们选择加拿大,那么其他所有内容都将对用户“隐藏”。到目前为止,我只为国家和地区制作了它。城市不'
我当前的 jQuery:
$('#countrySelect').on('change', function() {
// set the country ID equal to the selected value
var countryId = this.value;
// enable all regions to be selected
$("#regionSelect > option").prop('disabled', false);
// loop through to disable regions that cannot be selected
$("#regionSelect > option").each(function() {
if($(this).data('id')!= countryId && $(this).val() != 0) {
$(this).hide():
}
});
// if a country was selected allow the user to select a region
if(countryId > 0){
$('#regionSelect').prop('disabled',false);
}
else {
$('#regionSelect').prop('disabled',true);
$("#regionSelect").val('0');
}
});