javascript - 带有引导模式框的自定义选择框错误

Question

我正在尝试在引导模式框中使用具有一些不同 css 和搜索功能的自定义选择框。这只是选择代码:

  <link rel="stylesheet" href="chosen.css">
  <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Aland Islands">Aland Islands</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
   </select>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
   <script src="chosen.jquery.js" type="text/javascript"></script>
   <script type="text/javascript">
var config = {
  '.chosen-select'           : {},
  '.chosen-select-deselect'  : {allow_single_deselect:true},
  '.chosen-select-no-single' : {disable_search_threshold:10},
  '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
  '.chosen-select-width'     : {width:"95%"}
}
for (var selector in config) {
  $(selector).chosen(config[selector]);
}
  </script>

问题是，在模态框外使用时，选择看起来很好。但是，当在模式框中使用时，选择的所有内容的宽度都像 10px。我错过了什么？任何帮助表示赞赏。
编辑:我只是尝试通过 jquery 设置它的宽度，但没有用。

Answer 1

我认为问题在于您如何设置所选插件。使用具有自定义宽度的最低限度设置效果很好:

$(".chosen-select").chosen({width: "95%"}); 

和:

http://jsfiddle.net/0h4fowp5/1/