Question

所以我正在创建一个下拉列表。我从3个一般位置的数据库中检索数据。国家，地区/州/普罗维登斯和城市。所以我有3个下降（每个一般位置一个）。选择国家/地区时，我只希望该国家/地区内的地区成为选项。我将所有区域放在select标签中，因为我不知道用户将选择哪个国家/地区，我正在尝试避免使用PHP进行AJAX调用。

我当前的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。例如：加利福尼亚州的数据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');
  }           
});

Answer 1

主要关键点是data('id') - 您正试图获得.prop('data-id')。

我会做这样的事情

$("#regionSelect > option[data-id!=" + countryId + "]").hide();

FIDDLE：http://jsfiddle.net/rxHLq/

删除了冗余代码的新FIDDLE：http://jsfiddle.net/rxHLq/1/

再次更新：http://jsfiddle.net/rxHLq/4/（Eagle的答案通过显示隐藏元素添加到我的示例中，以防更改选项）

Answer 2

您可以在此处根据data-id

显示与某个国家/地区相关联的所有区域

$('#countrySelect').change(function()
{
    $('#regionSelect').prop('disabled',$(this).val() == "0");
    $('#regionSelect option[data-id='+$(this).val()+']').show();
    $('#regionSelect option[data-id!='+$(this).val()+']').hide();
});

http://jsfiddle.net/TmEbd/

隐藏选择选项值，以便用户无法查看

2 个答案: