CODEWITHSUNDEEP
javascriptjqueryhtml
cpt-crunchy
cpt-crunchy

Reputation: 391

jQuery Hide options in a select list

The options in my "States" drop-down menu are all being hidden

I'm trying to filter based on the value of the Country drop-down which is selected.

$('#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>

Upvotes: 1

Views: 9526

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

That could be achieved simply like :

$('#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();
});

Or also using one line like :

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

Code:

$('#Content_C003_Country').change(function() {
  $("#Content_C003_State option").hide();
  $("#Content_C003_State option[value^='" + $(this).val() + "']").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>

Upvotes: 0

Taplar
Taplar

Reputation: 24965

(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>

Upvotes: 2

Related Questions