How to hide or remove options from jQuery Chosen select dropdown

Question

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 :)

Answer 1

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");

Answer 2

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");