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中的內(nèi)容將無法顯示

<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屬性規(guī)定當使用 "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>

根據(jù)具體需要參考文檔