Question

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

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

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

Answer 1

我认为问题在于如何设置所选插件。使用自定义宽度的最小设置可以正常工作：

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

和

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

使用bootstrap模式框自定义选择框bug

1 个答案: