如果标签处于活动状态，则下拉菜单选项会更改

Question

怎么做，所以如果选择所有国家显示City0-4，如果Country1 - City0-2，Country2 - City3-4等。 https://jsfiddle.net/yza0ky3o/

<div class="search-type">
  <label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">All country</label>
  <label><input name="tab" type="radio">Country1</label>
  <label><input name="tab" type="radio">Country2</label>
  <div class="search-type-arrow"></div>
</div>

<div class="col-md-4">
<select data-placeholder="All city" class="chosen-select-no-single" >
    <option>City0</option>  
    <option>City1</option>
    <option>City2</option>
    <option>City3</option>
    <option>City4</option>
</select>
</div>

Answer 1

这是一个不使用jQuery的快速解决方案 - 尽管你可以使用jQuery保存很多行代码。

＆＃13;

＆＃13;

function toggleCities(radio) {
  var select = document.getElementById('cities');
  // loop through cities' options and toggle each one depending on
  // the current radio's value
  for (i = 0; i < select.options.length; i++) {
    var option = select.options[i]
    // add .hide class if radio's value is not all and value is not equal to current country
    option.classList.toggle('hide', radio.value != 'all' && radio.value != option.dataset.country);
  }
}

＆＃13;

/* create a class to hide option */
option.hide {
  display: none;
}

＆＃13;

<div class="search-type">
  <!-- add onchange and value attributes to your radios -->
  <label class="active"><input class="first-tab" name="tab" checked="checked" type="radio" onchange="toggleCities(this)" value="all">All country</label>
  <label><input name="tab" type="radio" onchange="toggleCities(this)" value="1">Country1</label>
  <label><input name="tab" type="radio" onchange="toggleCities(this)" value="2">Country2</label>
  <div class="search-type-arrow"></div>
</div>

<div class="col-md-4">
  <!-- add ID attribute to your select -->
  <select id="cities" data-placeholder="All city" class="chosen-select-no-single">
    <!-- add data-attribute to your options -->
    <option data-country="1">City0</option>  
    <option data-country="1">City1</option>
    <option data-country="1">City2</option>
    <option data-country="2">City3</option>
    <option data-country="2">City4</option>
</select>
</div>

＆＃13;

＆＃13;

＆＃13;

• HTML onchange Event Attribute

• Element.classList

• Using data attributes

编辑：jQuery解决方案

＆＃13;

＆＃13;

$(function () {
  // attach onchange event to radio buttons
  $('input[name=tab]').change(function () {
    var radio = this;
    // loop through each option
    $('#cities option').each(function () {
      // show option if radio's value is ALL or equal to option's country
      $(this).toggle(radio.value == 'all' || radio.value == this.dataset.country);
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-type">
  <!-- add value attributes to your radios -->
  <label class="active"><input class="first-tab" name="tab" checked="checked" type="radio" value="all">All country</label>
  <label><input name="tab" type="radio" value="1">Country1</label>
  <label><input name="tab" type="radio" value="2">Country2</label>
  <div class="search-type-arrow"></div>
</div>

<div class="col-md-4">
  <!-- add ID attribute to your select -->
  <select id="cities" data-placeholder="All city" class="chosen-select-no-single">
    <!-- add data-attribute to your options -->
    <option data-country="1">City0</option>  
    <option data-country="1">City1</option>
    <option data-country="1">City2</option>
    <option data-country="2">City3</option>
    <option data-country="2">City4</option>
</select>
</div>

＆＃13;

＆＃13;

＆＃13;