I would like to hide certain elements from a dropdown that is created using the Chosen plugin.
I have tried removing it:
$( 'option:contains("Swatch 1")').remove().trigger("chosen:updated"); and just hiding it:
$( '.chosen-results li:contains("Swatch 1")').css('display,'none');
But neither works.
See Colours dropdown: http://www.carolineelisa.com/test/wordpress/product/machine/
Any help appreciated :)
In the original select you need to hide the option. For example:
$('select.chosen-select options:contains("Swatch 1")'); Then update the chosen options with:
$('select.chosen-select').trigger("chosen:updated"); If you have more than one chosen drop down on the page then it probably would be better to use a more specific id or class on that element in the place of $('select.chosen-select'). So your code would become:
$('#swatch_select options:contains("Swatch 1")'); $('#swatch_select').trigger("chosen:updated"); 
Here's a jquery snipped to deselect and update a chosen ddl that is designated as multiple. ddlID is the ID of the chosen ddl and ddlValue is the value property of the option.
$("#ddlID option[value='" + ddlValue + "']").prop('selected', false); $("#ddlID").trigger("chosen:updated"); hide the option and update....
$('#button').click(function(){ $('select#theIDselect > option[value="Swatch 1"]').hide(); $('#theIDselect').trigger("chosen:updated"); }); Small edit of kamijean's code:
$('select.chosen-result option:contains("Swatch 1")').hide(); $('select.chosen-result').trigger("chosen:updated"); so not chosen-select but chosen-result and not options but option
for selecting by values and not title use
$('select.chosen-result option[value=830]').hide(); $('select.chosen-result').trigger("chosen:updated"); You can hide with value or with class name. Check 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>