首页> 实战笔录 >前端开发 >JQuery JQuery

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

作者:小萝卜 2019-06-18 浏览 2139

简介jQuery Chosen select下拉框插件动态生成option,当我们需要动态更新选择下的选择项时,只需在更新选择项后触发选择中的liszt:updated事件就可以了(新版本本:chosen:updated)

一,文件引入

使用这个插件需要引入下列三个文件:

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");

 

 

很赞哦! (1)

文章评论

    高端网站建设