使用display：none的jQuery select2插件

Question

我正在使用select2插件，并且在做style="display:none"时遇到了困难。

这是我的代码：

$(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

呈现select2时，通常会生成此html：

<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>

如果未在HTML中为您的选择定义ID，则通常会生成一个ID，例如“ s2id_autogen1”。

这是使用CSS将其隐藏的JSFiddle，以及要使用的jQuery选择器：

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