简介

Chosen 是一款JQuery下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。此外，还可以搜索查找下拉选项。它可对列表进行分组，同时也可禁用某些选择项。chosen.jquery.js 让你下拉框更简洁实用！

使用

1.  引入 jquery.js 、chosen.css 和 chosen.jquery.js 文件

2.  HTML

<!-- single dropdown -->
<select style="width:200px;">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option>Dojo Toolkit</option>
</select>

<!-- multiple dropdown -->
<select multiple="true" style="width:400px;">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option selected="selected">Dojo Toolkit</option>
</select>

3.  调用

<script type="text/javascript">
  jQuery(document).ready(function(){jQuery(".chosen").chosen();});
</script>

更多说明

1）如何设置模拟选择框的默认文本？

jQuery(".chosen").data("placeholder","Select Frameworks...").chosen();

2）如何设置没有搜索结果时显示的文本？

$(".chzn-select").chosen({no_results_text: "没有匹配结果"});

3）如何给选项分组？

<select data-placeholder="Your Favorite Football Teams" style="width:350px;" multiple tabindex="6">
  <option value=""></option>
  <optgroup label="NFC EAST">
    <option>Dallas Cowboys</option>
    <option>New York Giants</option>
    <option>ziladelphia Eagles</option>
    <option>Washington Redskins</option>
      <optgroup>
        <optgroup label="NFC NORTH">
          <option>Chicago Bears</option>
          <option>Detroit Lions</option>
          <option>Green Bay Packers</option>
          <option>Minnesota Vikings</option>
        </optgroup>
      </optgroup>
    </optgroup>
  </select>

4）如何开启多选支持？

<select data-placeholder="Choose a Country" multiple style="width:350px;" tabindex="4">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>

5）如果将此下拉表单的高度修改，需要修改CSS。

相关链接

官网地址 ：https://davidwalsh.name/jquery-chosen

参数说明 ：https://harvesthq.github.io/chosen/options.html

GitHub 地址：https://github.com/components/chosen