Geek Answers Handbook

How to hide or remove options from jQuery Selected drop-down list selection

I would like to hide some elements from the drop-down list created using the Chosen plugin.

I tried to remove it:

$( 'option:contains("Swatch 1")').remove().trigger("chosen:updated");

and just hide it:

$( '.chosen-results li:contains("Swatch 1")').css('display,'none');

But does not work.

See the Colors drop-down menu: http://www.carolineelisa.com/test/wordpress/product/machine/

Any help is appreciated :)

+9
jquery jquery-chosen
source share
6 answers

In the source element you need to hide this option. For example:

 $('select.chosen-select options:contains("Swatch 1")');

Then update your selections with

 $('select.chosen-select').trigger("chosen:updated");

If you have several selected folders on a page, then it would probably be better to use a more specific identifier or class in this element instead of $ ('select.chosen-select'). Thus, your code will be as follows:

 $('#swatch_select options:contains("Swatch 1")'); $('#swatch_select').trigger("chosen:updated");
+5
source share

Here jquery is disabled until unselect and will update the selected ddl, which is indicated as multiple. ddlID is the identifier of the selected ddl, and ddlValue is the value of the option property.

 $("#ddlID option[value='" + ddlValue + "']").prop('selected', false); $("#ddlID").trigger("chosen:updated");
0
source share

hide the option and update ....

 $('#button').click(function(){ $('select#theIDselect > option[value="Swatch 1"]').hide(); $('#theIDselect').trigger("chosen:updated"); });
0
source share

Small editing of kamijean code:

  $('select.chosen-result option:contains("Swatch 1")').hide(); $('select.chosen-result').trigger("chosen:updated");

so it’s not selected, selected, but selected, not options, but option

to select by value, not by name, use

  $('select.chosen-result option[value=830]').hide(); $('select.chosen-result').trigger("chosen:updated");
0
source share

You can hide with a value or class name. Check the working code here.

 <select id="dd_option" data-placeholder="Select one..." class="chzn-select" style="width:350px;" tabindex="2"> <option value="all" selected="selected"> All </option> <option value="mls" class="list_srch"> #MLS Number </option> <option value="zip" class="list_srch"> Zip/Postal </option> <option value="title"> Listing Title </option> </select> <button type="button" id="btn_hide_val">Hide with value</button> <button type="button" id="btn_hide_class">Hide with class</button> <button type="button" id="btn_unhide">Unhide</button> <script> 

 $(".chzn-select").chosen(); $('#btn_hide_val').click(function() { // Just hide option #MLS Number, Zip/Postal $("#dd_option option[value='mls']").hide(); $("#dd_option option[value='zip']").hide(); $("#dd_option").trigger("chosen:updated"); }); $('#btn_hide_class').click(function() { // Just hide option #MLS Number, Zip/Postal $("#dd_option option[class='list_srch']").hide(); $("#dd_option").trigger("chosen:updated"); }); $('#btn_unhide').click(function() { // Just hide option 4 $("#dd_option option[class='list_srch']").show(); $("#dd_option").trigger("chosen:updated"); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" /> </head> <body> <form> <div id="container"> <h3>Show/Hide options with value and class</h3> <select id="dd_option" data-placeholder="Select one..." class="chzn-select" style="width:350px;" tabindex="2"> <option value="all" selected="selected"> All </option> <option value="mls" class="list_srch"> #MLS Number </option> <option value="zip" class="list_srch"> Zip/Postal </option> <option value="title"> Listing Title </option> </select> <br /><br /> <button type="button" id="btn_hide_val">Hide with value</button> <button type="button" id="btn_hide_class">Hide with class</button> <button type="button" id="btn_unhide">Unhide</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js" type="text/javascript"></script>

0
source share

It works great

 jQuery( '.chosen-results li:contains("Swatch 1")').hide();

If you want to use $ safely wrap your code with this

 (function($) { // $ Works! You can test it with next line if you like // console.log($); })( jQuery );
-one
source share

More articles:


All Articles