Tristan Jahier Tristan Jahier - 1 year ago 125
Javascript Question

Chosen: retrieve the UI container from the raw select DOM element

I use Harvest's Javascript library to enhance


This library creates a
element along with the original
. This
contains the Chosen enhanced UI:

<select multiple id="my-list" class="chosen">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>

<div class="chosen-container chosen-container-multi ..." id="my-list_chosen">
<ul class="chosen-choices">
<li class="search-choice">
<a class="search-choice-close" data-option-array-index="2"></a>
<li class="search-choice">
<a class="search-choice-close" data-option-array-index="4"></a>

I would like to retrieve this Chosen UI container (the
), given that I only know the original
element. The challenge is that there may be more than 1 multiple select in the HTML document.

The easy case is when the
element has an ID, so the Chosen UI container has the same ID suffixed with
, as you can see in the above snippet.

But Chosen does not require elements to have and ID attribute to work. So what about multiple
elements with no ID? What is the proper way to identify the Chosen UI container?

[EDIT] For those who wonder why I can't assume there is an "id" attribute on the
: I wrote a small plugin to handle selection order for Chosen, and I can't force users to put an ID on the
while Chosen does not require it itself.

Answer Source

Finally I've found a workaround. There is no proper way to get the container provided by Chosen.

[Update] : according to this comment on Github, there is "officially" no proper way to get the Chosen UI element with PrototypeJS.

With jQuery plugin

I've look into the CoffeeScript code of Chosen, and found something interesting. If you're using Chosen plugin for jQuery, the Chosen instance is stored locally thanks to jQuery data() function.

You can retrieve the Chosen UI container this way:


The general case

Unfortunately, with PrototypeJS plugin, there is no trick like that.

But we can make an hypothesis in the general case: the Chosen UI container is the first next sibling of the raw <select> element. This assumption is quite strong because, unless something moves the <select> or the Chosen container dynamically, this will always be true.

Here is a not so bad solution, using the 2 different frameworks:

Using PrototypeJS".chosen-container.chosen-container-multi")

Using jQuery

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download