title: How to pass <option> attributes to select2?
body: <p>I'm using Select2 4.0. I have a list of options, some of which are "deleted" and I want to signify which are which. My select element is like this:</p>
  
  <pre><code>&lt;style&gt;.deleted { color: red; }&lt;/style&gt;
  
  &lt;select name="itemid" id="item-list" tabindex="1"&gt;
      &lt;option&gt;&lt;/option&gt;
      &lt;option value="1"&gt;Item 1&lt;/option&gt;
      &lt;option value="2" class="deleted"&gt;Item 2&lt;/option&gt;
      &lt;option value="3"&gt;Item 3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And it's initialised like this:</p>
  
  <pre><code>&lt;script src="/static/js/select2.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
      $("#item-list").select2({
          placeholder: 'Select item'
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>However, on the resulting HTML code that select2 generates I don't see any way to reference that class. Also tried a <code>data-deleted</code> attribute on the option, with no luck.</p>
  
  <p>The only thing I see that comes close is the <a href="https://select2.github.io/examples.html#templating" rel="noreferrer"><code>templateResult</code></a> option, where I can check for <code>opt.element.className</code>. But I cannot see how to access the select2 option from there. Anyway that callback runs on every single search which is not at all what I want.</p>
  
  <p>Is there some other way to style particular options in Select2?</p>
  
  <p>UPDATE: as noted in the comments there is a <code>find()</code> function, but that only gets the original <code>&lt;option&gt;</code> elements, not the <code>&lt;li&gt;</code> elements that select2 generates. Here's what I tried:</p>
  
  <pre><code>var sel2 = $("#item-list").select2({
      placeholder: 'Select item'
  });
  
  sel2.find('.deleted').each(function() {
      $(this).css('color', 'red');
  });
  </code></pre>