Chosen-select

官网: https://harvesthq.github.io/chosen/

引入js和css

• 网页的js 添加一下代码

$(function(){
    $(".chosen-select").chosen();
})
复制代码

• data-placeholder 当无数据可选时，显示data-placeholder的值，当第一个option为空时也显示此值。
• 添加 multiple 后变成多选框

<select data-placeholder="Choose a country..." multiple class="chosen-select">
复制代码

调用chosen（）时可以设置一些参数

• 可选数小于10时，隐藏搜索框

    disable_search_threshold: 10}
复制代码

• 搜索框搜不到数据时，显示的文字

    no_results_text: "Oops, nothing found!"
复制代码

• 多选时限制多选框可选的数量

    max_selected_options: 5
复制代码

• 多选时可以取消已选元素

    allow_single_deselect: true
复制代码

• 多选时，选择数量超过限制时触发此函数

    $(".chosen-select").bind("chosen:maxselected", 
        function () { ... }
    ); 
复制代码

• 修改值时需要更新

    $("#form_field").trigger("chosen:updated");
复制代码

• 值改变时触发函数

    $("#form_field").chosen().change( … );
复制代码