Chosen插件简单笔记

Git地址: https://github.com/harvesthq/chosen

需要引用的文件

  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="prism.css">
  <link rel="stylesheet" href="chosen.css">
  <script src="jquery.js"></script>
  <script src="chosen.jquery.js"></script>
  <script src="prism.js"></script>
  <script src="init.js"></script>

最基本的使用方法

简单的说，就是添加chosen-select类名，第一个value值为空的option如果去掉那么placeholder中的内容将无法显示

<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="1">
    <option value=""></option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
</select>

tabindex属性规定当使用 "tab" 键进行导航时元素的顺序

多选框

<select data-placeholder="Choose a Country..." class="chosen-select" multiple tabindex="2">
     <option value=""></option>
     <option value="United States">United States</option>
     <option value="United Kingdom">United Kingdom</option>
     <option value="Afghanistan">Afghanistan</option>
</select>

分组单选

<select data-placeholder="Your Favorite Football Team" class="chosen-select" tabindex="3">
    <option value=""></option>
    <optgroup label="NFC EAST">
        <option>Dallas Cowboys</option>
        <option>New York Giants</option>
        <option>Philadelphia 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>
</select>

分组多选

<select data-placeholder="Your Favorite Football Team" class="chosen-select" tabindex="3">
    <option value=""></option>
    <optgroup label="NFC EAST">
        <option>Dallas Cowboys</option>
        <option>New York Giants</option>
        <option>Philadelphia 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>
</select>

其他功能

例：选项默认选中和禁止选中

<option selected>Sloth Bear</option>
<option disabled>Sun Bear</option>

根据具体需要参考文档