jquery.chosen.js,使用需要引用jquery

HTML如下

<div>
  <label>多选:</label>
  <select class="form-control form-control-chosen chosen" data-placeholder="请选择" multiple>
	 <option>吉他</option>
	 <option>钢琴</option>
	 <option>电子琴</option>
	 <option>古筝</option>
	 <option>街舞</option>
	 <option>表演</option>
  </select>
</div>

Jquery代码如下

$('.chosen').chosen({
        no_results_text: "没有找到结果！",//搜索无结果时显示的提示  
        max_shown_results: 5, //下拉框最大显示选项数量
        search_contains:true,   //关键字模糊搜索。设置为true，只要选项包含搜索词就会显示；设置为false，则要求从选项开头开始匹配
        allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许，选中选项会有一个x号可以删除选项
        disable_search: false, //禁用搜索。设置为true，则无法搜索选项。
        disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
        inherit_select_classes: true, //是否继承原下拉框的样式类，此处设为继承
        placeholder_text_single: '选择爱好', //单选选择框的默认提示信息，当选项为空时会显示。如果原下拉框设置了data-placeholder，会覆盖这里的值。
        width: '400px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度，也会被width覆盖。
        display_disabled_options: false,//是否显示禁止选择的项目
        single_backstroke_delete: false, //false表示按两次删除键才能删除选项，true表示按一次删除键即可删除
        case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
        group_search: false, //选项组是否可搜。此处搜索不可搜
        include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示，true显示。默认false。
   });

（1）参数说明如下表格

（2）属性说明

<select class="chosen" data-placeholder="请选择" multiple>
    <option>吉他</option>
    <option>钢琴</option>
    <option>电子琴</option>
    <option>古筝</option>
    <option>街舞</option>
</select>

（3）触发事件

$('.chosen').on('change', function(e, params) {
  do_something(e, params);
});

注意：所有 Chosen 自定义事件 都包含 Chosen 实例 chosen 对象作为参数。

（4）监听事件

$('.chosen').trigger('chosen:updated');

注意： 需要引入jquery

亲测很好用的选择插件，有不明白的可以留言，问我。感谢~