jQuery select2 plugin using display:none

Question

I'm using the select2 plugin and i'm having a hard time doing the style="display:none" .

This is my code:

$(document).ready(function () {
   $(".selectPretty").select2({
   }); 
});

<select class="selectPretty" name="charge_to">
      <option selected style="display:none">Need to hide</option>
      <option>Another Data</option>
</select>

Answer 1

When you render a select2 this html is usually generated:

<div class="select2-container" id="s2id_my_unique_id" style="width: 67%;"><a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1">   <span>Select me!</span><abbr class="select2-search-choice-close" style="display:none;"></abbr>   <div><b></b></div></a><input class="select2-focusser select2-offscreen" type="text"><div class="select2-drop select2-with-searchbox" style="display:none">   <div class="select2-search">       <input type="text" autocomplete="off" class="select2-input">   </div>   <ul class="select2-results">   </ul></div></div>

If id is not defined for your select in html, then it usually generates an id like 's2id_autogen1'.

Here is the JSFiddle using CSS to hide it and also a jQuery selector to use:

http://jsfiddle.net/bitclaw/SLvA7/