chosen.jquery.min.js的使用（select下拉框支持首字母搜索）

来源：互联网发布：mac用户头像编辑：程序博客网时间：2024/05/18 23:57

一、文件引入

jquery必须引入,且需要在chosen.js之前
chosen.jquery.min.js //压缩版的chosen核心jquery代码
chosen.css //chosen 的样式文件

二、代码示例

1 . html 代码

<select  class="chosen-select" data-placeholder="Choose a Country..." multiple> </select>1
1

data-placeholder是将第一个option留空时默认显示的内容。
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为多选时，最多选择个数});选项默认值描述allow_single_deselectfalse设置为 true 时非必选的单选框会显示清除选中项图标disable_searchfalse设置为 true 隐藏单选框的搜索框disable_search_threshold0少于 n 项时隐藏搜索框enable_split_word_searchtrue是否开启分词搜索，默认开启inherit_select_classesfalse是否继承 select 元素的 class，如果设为 true，Chosen 将把 select 的 class 添加到容器上max_selected_optionsInfinity最多选择项数，达到最大限制时会触发 chosen:maxselected 事件no_results_text"No results match"没有搜索到匹配项时显示的文字placeholder_text_multiple"Select Some Options"多选框没有选中项时显示的占位文字placeholder_text_single"Select an Option"单选框没有选中项时显示的占位文字search_containsfalse搜素包含项，默认从第一个字符开始匹配single_backstroke_deletetrue多选框中使用退格键删除选中项目，如果设为 false，第一次按 delete/backspace 会高亮最好一个选中项目，再按会删除该项widthOriginal select width.Chosen 生成的选择框宽度，默认为和原 select 宽度保持一致display_disabled_optionstrue是否显示禁止选择的项目display_selected_optionstrue多选框是否在下拉列表中显示已经选中的项1
2
3
4
5
6
1
2
3
4
5
6

3 . 事件

　a) change事件：

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

　b) 当我们需要动态更新select下的选择项时，只要在更新选择项后触发Chosen中的liszt:updated事件就可以了

//...$(".dept-select").html('...<option>部门6</option>...');$(".dept-select").trigger("liszt:updated");

Chosen 会在源 <select> 元素上触发事件。

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

事件描述changeChosen 触发标准的 change 事件，同时会传递 selected or deselected 参数，方便用户获取改变的选项chosen:readyChosen 实例化完成时触发chosen:maxselected超过 max_selected_options 设置时触发chosen:showing_dropdownChosen 下拉选框打开完成时触发chosen:hiding_dropdownChosen 下拉选框关闭完成时触发chosen:no_results搜索没有匹配项时触发

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

、

4.chose监听事件

通过在 <select> 元素上触发特定事件可以调用 Chosen 的监听函数。

// tell Chosen that a select has changed$('.my_select_box').trigger('chosen:updated');

事件描述chosen:updated通过 JS 改变 select 元素选项时应该触发此事件，以更新 Chosen 生成的选框chosen:activate相当于 HTML focus 事件chosen:open激活 Chosen 并显示搜索结果chosen:close关闭 Chosen 并隐藏搜索结果

5.属性

可以通过在 <select> 上设置属性传递给 Chosen。

<select class="my_select_box" data-placeholder="Select Your Options">  <option value="1">Option 1</option>  <option value="2" selected>Option 2</option>  <option value="3" disabled>Option 3</option></select>

属性描述data-placeholder占位符文字
注意：改属性会覆盖 placeholder_text_multiple 或 placeholder_text_single 选项。multiple有此属性的 select 会渲染成可以多选的 Chosen 选框selected, disabled设置选中、禁止状态，Chosen 会读取这些属性

6.对齐方式

选项文字默认是左对齐的，可以在class属性中加入“chzn-rtl”来设置右对齐：

?
1
<select data-placeholder="选择部门" class="dept_select chzn-rtl" style="width:150px;">

7.如果不想要搜索框的话，很简单，用css把它隐藏掉就OK了：

?
1
2
3
.chzn-container-single .chzn-search {
    display:none;
}

阅读全文

0 0

mac用户头像

原创粉丝点击

chosen.jquery.min.js的使用（select下拉框支持首字母搜索）

一、 文件引入

二 、代码示例

一、文件引入

二、代码示例