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

Question

所以我正在创建一个下拉列表。我从我的 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');
  }           
});     

Answer 1

您可以在此处显示与基于 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/

Answer 2

主要的症结将是data('id') - 你试图获得.prop('data-id')。

我会做这样的事情

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

小提琴：http://jsfiddle.net/rxHLq/

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

再次更新：http://jsfiddle.net/rxHLq/4/（Eagle 的回答通过显示隐藏元素来增加我的示例，以防选择选项被更改）