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
– Taplar, Commented Dec 20, 2017 at 18:48
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
– octopushugs, Commented Dec 20, 2017 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
– mfranchi, Commented Dec 20, 2017 at 18:51

cpt-crunchy · Accepted Answer · 2017-12-20 19:46:14Z

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

halfer · Accepted Answer · 2018-01-16 18:16:39Z

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.
How would this account for an option such as. ` <option value="136-ZB">Zimbabuay</option>` To not populate if Canada is the selected country.

Collectives™ on Stack Overflow

jQuery Hide options in a select list

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related