jquery chosen插件使用及select常用方法
jquery chosen插件使用及select常用方法

jquery chosen插件使用及select常用方法

1、chosen插件使用

chosen插件依赖于jQuery库或prototype,使用之前要先引入jQuery或prototype。

引入jquery插件和chosen插件,对需要美化的下拉框执行chosen函数:$(selector).chosen(options)。可以把selector写成样式类,这样执行完chosen函数后,只要加上样式类就可以了。

举例

属性:

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

监听事件:

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

Chosen 触发的事件:

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

常用操作:
1.1、设置chosen下拉框中的选项内容

1.2、设置chosen选中某项

2、select使用操作

2.1、设置select内容

清空select:
$("#ddlregtype").empty();
设置select选项
$("#ddlregtype").html();

2.2、获取select相关内容

获取select选中的 value:
$("#ddlregtype").val();
获取select 选中的 text :
$("#ddlregtype").find("option:selected").text();
获取select选中的索引:
$("#ddlregtype").get(0).selectedIndex;

2.3、设置select选中某一项

根据value值

根据索引值

根据text值

但是以上两种方法在jquery低于1.4.2的版本(含)中有效,在更高版本中无效!

【高版本Jquery中解决办法:】
解决一:精确匹配,选择文本与所给字符串完全一样的option。

解决二:子串匹配,选择文本包含所给字符串的option。

解决三:自定义函数

2.4、操作select option选项

 

Visits: 283

发表回复