下拉框增强示例

标准下拉框

<select data-placeholder="Choose a Country..." class="form-control chosen-select" style="width:350px;" tabindex="1">
    <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>
    <option value="American Samoa">American Samoa</option>
    ... ...
</select>

<script type="text/javascript">
$('.chosen-select').chosen();
</script>

多选下拉框

<select data-placeholder="Choose a Country..." class="form-control chosen-select" 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="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
    <option value="Anguilla">Anguilla</option>
    <option value="Antarctica">Antarctica</option>
    <option value="Antigua and Barbuda">Antigua and Barbuda</option>
    <option value="Argentina">Argentina</option>
    <option value="Armenia">Armenia</option>
    <option value="Aruba">Aruba</option>
    <option value="Australia">Australia</option>
    <option value="Austria">Austria</option>
    <option value="Azerbaijan">Azerbaijan</option>
    ... ...
</select>

<script type="text/javascript">
$('.chosen-select').chosen();
</script>

支持 <optgroup>

<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="form-control chosen-select" tabindex="5">
    <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>
    <optgroup label="NFC SOUTH">
        <option>Atlanta Falcons</option>
        <option>Carolina Panthers</option>
        <option>New Orleans Saints</option>
        <option>Tampa Bay Buccaneers</option>
    </optgroup>
    <optgroup label="NFC WEST">
        <option>Arizona Cardinals</option>
        <option>St. Louis Rams</option>
        <option>San Francisco 49ers</option>
        <option>Seattle Seahawks</option>
    </optgroup>
    <optgroup label="AFC EAST">
        <option>Buffalo Bills</option>
        <option>Miami Dolphins</option>
        <option>New England Patriots</option>
        <option>New York Jets</option>
    </optgroup>
    <optgroup label="AFC NORTH">
        <option>Baltimore Ravens</option>
        <option>Cincinnati Bengals</option>
        <option>Cleveland Browns</option>
        <option>Pittsburgh Steelers</option>
    </optgroup>
    <optgroup label="AFC SOUTH">
        <option>Houston Texans</option>
        <option>Indianapolis Colts</option>
        <option>Jacksonville Jaguars</option>
        <option>Tennessee Titans</option>
    </optgroup>
    <optgroup label="AFC WEST">
        <option>Denver Broncos</option>
        <option>Kansas City Chiefs</option>
        <option>Oakland Raiders</option>
        <option>San Diego Chargers</option>
    </optgroup>
</select>

<!-- 多选框添加属性 multiple 即可 -->
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="form-control chosen-select" multiple tabindex="6">
    ... ...
</select>

<script type="text/javascript">
$('.chosen-select').chosen();
</script>

支持已选和禁用

自动高亮显示选中项并自动禁选禁用的项。

<!-- 单选下拉框 -->
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="form-control chosen-select" tabindex="7">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option selected>Sloth Bear</option>
    <option disabled>Sun Bear</option>
    <option>Polar Bear</option>
    <option disabled>Spectacled Bear</option>
</select>
<!-- 多选下拉框 -->
<select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="form-control chosen-select" tabindex="8">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option selected>Sloth Bear</option>
    <option disabled>Sun Bear</option>
    <option selected>Polar Bear</option>
    <option disabled>Spectacled Bear</option>
</select>

<script type="text/javascript">
$('.chosen-select').chosen();
</script>

自动隐藏单选下拉框的搜索框

配置项 disable_search_threshold 用以设置自动隐藏搜索框的选项数的阈值。即当选项数比设定值小时，将自动隐藏搜索框。

<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="form-control chosen-select-no-single" tabindex="9">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option selected disabled>Sloth Bear</option>
    <option disabled>Sun Bear</option>
    <option selected disabled>Paddington Bear</option>
    <option selected>Polar Bear</option>
    <option disabled>Spectacled Bear</option>
</select>

<script type="text/javascript">
$(".chosen-select").chosen({disable_search_threshold: 10});
</script>

支持自定义为空时的默认显示文本

当显示空内容时插件会自动以元素属性 data-placeholder 的值代替。如果没有设置 data-placeholder 属性，单选下拉框会默认显示 "Select an Option"，多选下拉框会默认显示 "Select Some Options"。

注: 单选下拉框下如果没有指定选中某项，浏览器会默认选中第一项，如果想要让默认文本内容生效，需要在下拉列表开始添加一个空白项。

<select data-placeholder="Choose a country..." style="width:350px;" multiple class="chosen-select">
    <option value=""></option>
</select>

<script type="text/javascript">
$(".chosen-select").chosen();
</script>

支持自定义未查找到结果时的提示文本

通过配置项 no_results_text 可以很方便地设置搜索结果为空时的提示文本。

$(".chosen-select").chosen({no_results_text: "Oops, nothing found!"});

多选下拉框的选择数限制

通过配置项 max_selected_options 可以很方便地限制多选下拉框允许选择的最大数目：

$(".chosen-select").chosen({max_selected_options: 5});

如果已经达到了最大限制数还去尝试选择其他项，则会触发事件 chosen:maxselected ：

$(".chosen-select").on("chosen:maxselected", function () { ... });

允许单选下拉框的反选

如果某个单选下拉框的值不是必须字段，可以设置 allow_single_deselect: true，插件会添加一个用以清空选择内容按钮元素，该功能需要第一项为空选项方生效。

$(".chosen-select").chosen({allow_single_deselect: true});

支持从右向左显示

插件支持从右向左显示下拉框，只需要为下拉框元素添加样式类 .chosen-rtl 即可。

<select class="chosen-select chosen-rtl">
</select>
  
<script type="text/javascript">
$(".chosen-select").chosen();
</script>

改变/更新 事件

表单域改变

当表单中下拉框选中或取消选中时，我们经常会项进行一些相关的业务处理。使用插件选择任何一项后，都会在原下拉框上触发 change 事件，可以通过监听该事件做一些操作：

$("#form_field").chosen().change({
    // do something
});

动态更新 Chosen 插件内容

如果想要动态更新下拉框的选择列表并及时应用到插件中，需要自行触发事件 "chosen:updated"，Chosen 插件将自动根据下拉列表更新内容重建控件内容。

$("#form_field").trigger("chosen:updated");

支持自定义宽度

通过配置项 width 可以很方便地自定义下拉框控件的宽度。

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

支持动态添加未匹配的搜索结果 组件库额外添加功能

通过设置配置项 allow_add_nomatch_result: true，支持在未搜索到查找内容时，插件在提示文本后面自动添加“添加”按钮，点击后会动态将搜索内容作为新的列表项添加到下拉列表末尾，新加项的显示文本和对应值均为搜索内容文本。

<select data-placeholder="Your Favorite Types of Bear" class="form-control chosen-select-no-match" style="width:350px;" tabindex="17" id="single-label-example">
    <option value=""></option>
    <option selected>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
</select>

<script type="text/javascript">
$('.chosen-select-no-match').chosen({allow_add_nomatch_result: true});
</script>