jQuery Chosen select下拉框插件动态生成option

一，文件引入

jquery // jquery必须，且需要在chosen.js之前

chosen.jquery.min.js //压缩版的选择核心jquery代码

chosen.css //选择的样式文件

二，代码示例

1。html代码

<select class="chosen-select dept-select" data-placeholder="选择部门" multiple="multiple">
    <option>部门1</option>
    <option>部门2</option>
    <option>部门3</option>
</select>

data-placeholder是将第一个选项留空时默认显示的内容。multiple 表示可以多选

主要还是class =“chosen-select”

2。JS代码

$(".chosen-select").chosen({
    no_results_text: "没有找到结果！",//搜索无结果时显示的提示
    search_contains:true,   //关键字模糊搜索，设置为false，则只从开头开始匹配
    allow_single_deselect:true, //是否允许取消选择
    max_selected_options:6  //当select为多选时，最多选择个数
});

3。事件

　a）更改事件：

$(".dept-select").chosen().change(function(){
    //do something...
});

　b）当我们需要动态更新选择下的选择项时，只需在更新选择项后触发选择中的liszt：updated事件就可以了(新版本本:chosen:updated）

//插入元素
$(".dept-select").html('<option>部门6</option>'); 

//老版本用这个 
$(".dept-select").trigger("liszt:updated"); 

//较新版本 
$(".dept-select").trigger("chosen:updated");

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/112/165.html

很赞哦！ (1)