Question

“状态”下拉菜单中的选项全部隐藏

我正在尝试根据所选的国家/地区下拉列表的值进行过滤。

$('#Content_C003_Country').change(function() {
  const filter = $(this).val();
  //console.log(filter);
  $("#Content_C003_State option").each(function() {
    ($("option[value^='" + filter + "']") != -1) ? $(this).hide(): $(this).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select id="Content_C003_Country" class="searchFieldDrop">
  <option value="36">Canada</option>
  <option value="222">United States</option>
</select>

<select id="Content_C003_State" class="searchFieldDrop">
  <option value="36-AB">Alberta</option>
  <option value="36-BC">British Columbia</option>
  <option value="36-MB">Manitoba</option>
  <option value="222-AZ">Arizona</option>
  <option value="222-AR">Arkansas</option>
  <option value="222-CA">California</option>
</select>

Answer 1

(function($){
  var $country = $('#Content_C003_Country');
  var $state = $('#Content_C003_State');
  var $stateOptions = $state.children();
  
  $country.on('change', function(){
    //remove the options
    $stateOptions.detach();
    //readd only the options for the country
    $stateOptions.filter(function(){
      return this.value.indexOf($country.val() + "-") === 0;
    }).appendTo($state);
    //clear out the value so it doesn't default to one it should not
    $state.val('');
  });
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Content_C003_Country" class="searchFieldDrop">
  <option value="36">Canada</option>
  <option value="222">United States</option>
</select>

<select id="Content_C003_State" class="searchFieldDrop">
  <option value="36-AB">Alberta</option>
  <option value="36-BC">British Columbia</option>
  <option value="36-MB">Manitoba</option>
  <option value="222-AZ">Arizona</option>
  <option value="222-AR">Arkansas</option>
  <option value="222-CA">California</option>
</select>

Answer 2

这可以简单地实现：

$('#Content_C003_Country').change(function() {
  //Hide all options
  $("#Content_C003_State option").hide();

  //Show the filtred ones
  $("#Content_C003_State option[value^='" + $(this).val() + "']").show();
});

或者也使用如下一行：

$("#Content_C003_State option").hide().end().find('[value^='+$(this).val()+']').show();

代码：

＆＃13;

$('#Content_C003_Country').change(function() {
  $("#Content_C003_State option").hide();
  $("#Content_C003_State option[value^='" + $(this).val() + "']").show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select id="Content_C003_Country" class="searchFieldDrop">
  <option value="36">Canada</option>
  <option value="222">United States</option>
</select>

<select id="Content_C003_State" class="searchFieldDrop">
  <option value="36-AB">Alberta</option>
  <option value="36-BC">British Columbia</option>
  <option value="36-MB">Manitoba</option>
  <option value="222-AZ">Arizona</option>
  <option value="222-AR">Arkansas</option>
  <option value="222-CA">California</option>
</select>

＆＃13;

jQuery隐藏选择列表中的选项

2 个答案: