title: Chosen: retrieve the UI container from the raw select DOM element
body: <p>I use Harvest's Javascript library to enhance <code>&lt;select&gt;</code> elements.</p>
  
  <p><a href="https://github.com/harvesthq/chosen" rel="nofollow">https://github.com/harvesthq/chosen</a></p>
  
  <p>This library creates a <code>&lt;div&gt;</code> element along with the original <code>&lt;select&gt;</code>. This <code>&lt;div&gt;</code> contains the Chosen enhanced UI:</p>
  
  <pre><code>&lt;select multiple id="my-list" class="chosen"&gt;
      &lt;option value="1"&gt;One&lt;/option&gt;
      &lt;option value="2"&gt;Two&lt;/option&gt;
      &lt;option value="3"&gt;Three&lt;/option&gt;
      &lt;option value="4"&gt;Four&lt;/option&gt;
      &lt;option value="5"&gt;Five&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="chosen-container chosen-container-multi ..." id="my-list_chosen"&gt;
      &lt;ul class="chosen-choices"&gt;
          &lt;li class="search-choice"&gt;
              &lt;span&gt;Three&lt;/span&gt;
              &lt;a class="search-choice-close" data-option-array-index="2"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="search-choice"&gt;
              &lt;span&gt;Five&lt;/span&gt;
              &lt;a class="search-choice-close" data-option-array-index="4"&gt;&lt;/a&gt;
          &lt;/li&gt;
          ....
      &lt;/ul&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to retrieve this Chosen UI container (the <code>&lt;div&gt;</code>), given that I only know the original <code>&lt;select&gt;</code> element. The challenge is that there may be more than 1 multiple select in the HTML document.</p>
  
  <p>The easy case is when the <code>&lt;select&gt;</code> element has an ID, so the Chosen UI container has the same ID suffixed with <code>_chosen</code>, as you can see in the above snippet.</p>
  
  <p>But Chosen does not require elements to have and ID attribute to work. So what about multiple <code>&lt;select&gt;</code> elements with no ID? What is the proper way to identify the Chosen UI container?</p>
  
  <p><strong>[EDIT]</strong> For those who wonder why I can't assume there is an "id" attribute on the <code>&lt;select&gt;</code>: I wrote a <a href="https://github.com/tristanjahier/chosen-order" rel="nofollow">small plugin to handle selection order for Chosen</a>, and I can't force users to put an ID on the <code>&lt;select&gt;</code> while Chosen does not require it itself.</p>