jQuery Hide options in a select list

Question

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>

You are going to want to remove the options, not hide them, if you want it to work with all IE. Not all IE versions respect the hide of an option and will leave the option there, but as a blank space. — Taplar, Dec 20 '17 at 18:48
https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css — Ctznkane525, Dec 20 '17 at 18:49
This line is going to always evaluate to false because you're comparing a jQuery object to -1: `( $("option[value^='" + filter + "']") != -1 )` You'll probably want to compare the value with `.val()` — octopushugs, Dec 20 '17 at 18:50
Your jQuery selector for the option elements will return a jQuery object so it will always evaluate to true if you compare it to -1. — mfranchi, Dec 20 '17 at 18:51
Related: https://stackoverflow.com/questions/20373558/options-with-displaynone-not-hidden-in-ie#20373614 — Taplar, Dec 20 '17 at 19:08

score 2 · Accepted Answer · edited Dec 20 '17 at 19:46

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

score 0 · Answer 2 · edited Jan 16 '18 at 18:16

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>

I like this solution. perhaps adding / removing a css class that does / does not display the element will be more compatible with IE11. — cpt-crunchy, Dec 20 '17 at 19:12
How would this account for an option such as. ` ` To not populate if Canada is the selected country. — cpt-crunchy, Dec 20 '17 at 19:31

jQuery Hide options in a select list

2 Answers2