jQuery chosen-select prevent hiding of select

Question

I want to hide a select with the chosen-select class applied if it has no elements except it doesn't work.

Ive tried

   $("#Category2").hide();

and then removing the chosen-select class prior to hide attempt:

 $("#Category2").remove("chosen-select");
$("#Category2").hide();

but neither approach works. If I don't do:

$(".chosen-select").chosen();

then the select will hide. Also no errors in Chrome Developer tools console.

Is this a known issue? Is there a "trick" to doing this?

Answer 1

Chosen creates additional elements - try $("#Category2_chosen").hide(); . See it work: http://jsfiddle.net/lhoeppner/9UB23/

Edit for further explanation:

Try using your browser's development tools to inspect the DOM elements (usually right-click on the element, then "Inspect element" or similar).

You'll see that once you call $(element).chosen() on a DOM element, the following things happen:

1. the original element is hidden (it will still be in the DOM but have style="display: none;" )
2. the chosen drop-down widget is created using a number of other DOM elements, which are all grouped into a div of class chosen-container and an id which is derived from the element's id (in this case by appending "_chosen" to it)

The underscore doesn't have any special meaning, it's simply chosen's way of creating another unique id. It could just as append "-chosen" or "_mycustomsuffix".

Answer 2

$("select#chosen-select").hide()

应该做的伎俩。