jquery chosen插件使用及select常用方法
1、chosen插件使用
chosen插件依赖于jQuery库或prototype,使用之前要先引入jQuery或prototype。
引入jquery插件和chosen插件,对需要美化的下拉框执行chosen函数:$(selector).chosen(options)。可以把selector写成样式类,这样执行完chosen函数后,只要加上样式类就可以了。
举例
<head>
<meta charset="utf-8">
<link href='https://cdn.bootcss.com/chosen/1.5.1/chosen.min.css' rel='stylesheet'/>
<style>
.w-country{width:100px;}
</style>
<script src='https://code.jquery.com/jquery-1.9.0.js'></script>
<script src='https://cdn.bootcss.com/chosen/1.5.1/chosen.jquery.js'></script>
<script>
$(function(){
$('.chosen').chosen({
no_results_text: "没有找到结果!",//搜索无结果时显示的提示
search_contains:true, //关键字模糊搜索。设置为true,只要选项包含搜索词就会显示;设置为false,则要求从选项开头开始匹配
allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许,选中选项会有一个x号可以删除选项
disable_search: false, //禁用搜索。设置为true,则无法搜索选项。
disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
inherit_select_classes: true, //是否继承原下拉框的样式类,此处设为继承
placeholder_text_single: '选择国家', //单选选择框的默认提示信息,当选项为空时会显示。如果原下拉框设置了data-placeholder,会覆盖这里的值。
width: '400px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度,也会被width覆盖。
max_shown_results: 1000, //下拉框最大显示选项数量
display_disabled_options: false,
single_backstroke_delete: false, //false表示按两次删除键才能删除选项,true表示按一次删除键即可删除
case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
group_search: false, //选项组是否可搜。此处搜索不可搜
include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示,true显示。默认false。
});
$('.chosen2').chosen({
search_contains:false,
enable_split_word_search: true //分词搜索,选项词可通过空格或'[]'分隔。search_contains为false时才能看出效果
});
});
</script>
</head>
<body>
<select class='chosen w-country' data-placeholder='请选择国家' multiple >
<option value=""></option>
<option value="China">中国</option>
<option value="US">US</option>
<option value="England">英国</option>
<option value="Canada">加拿大</option>
<option value="Cube">古巴</option>
</select>
<br/><br/>
<select class='chosen'>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
<br/><br/>
<select class='chosen2' >
<option value=""></option>
<option value="vegetable">西红柿 黄瓜 芹菜</option>
<option value="fruit">葡萄 草莓 芭乐[潘石榴]</option>
</select>
</body>
属性:
选项 | 描述 |
---|---|
data-placeholder | 占位符文字。注意: 该属性会覆盖 placeholder_text_multiple 或 placeholder_text_single 选项。 |
multiple | 有此属性的 select 会渲染成可以多选的 Chosen 选框 |
selected, disabled | 设置选中、禁止状态,Chosen 会读取这些属性 |
<select class='chosen w-country' data-placeholder='请选择国家' multiple >
<option value=""></option>
<option value="China" selected>中国
<option value="Canada" disabled>加拿大</option>
</select>
监听事件:
选项 | 描述 |
---|---|
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').on('change', function(e, params) {
do_something(e, params);
});
Chosen 触发的事件:
事件 | 描述 |
---|---|
chosen:updated | 通过 JS 改变 select 元素选项时应该触发此事件,以更新 Chosen 生成的选框 |
chosen:activate | 相当于 HTML focus 事件 |
chosen:open | 激活 Chosen 并显示搜索结果 |
chosen:close | 关闭 Chosen 并隐藏搜索结果 |
$('.chosen').trigger('chosen:updated');
//我在项目中用的是
$('.chosen').trigger('liszt:updated');
常用操作:
1.1、设置chosen下拉框中的选项内容
/*设置下拉框选项内容*/
$(selectId).html(change_options);
//需要执行trigger方法,才会生效
$(selectId).trigger("liszt:updated");
1.2、设置chosen选中某项
//设置选中第几项
$(selectId).get(0).selectedIndex=i;
//需要执行trigger方法,才会生效
$(selectId).trigger("liszt:updated");
//需要执行change()方法,才会触发onChange事件
$(selectId).change();
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选中某一项
<div id="div1">
<select id="select1">
<option value="1">律师</option>
<option value="2">监护人</option>
<option value="3">亲友</option>
<option value="4">其他</option>
</select>
</div>
根据value值
//根据value值
$("#select1 option[value='4']").attr("selected","selected");
$("#select1 option[value='4']").attr("selected",true);
$("#select1").val("4");
$("#select1").get(0).value = '3';
根据索引值
//根据索引值
$("#select1 ").get(0).selectedIndex=index;//index为索引值(从0开始)
$("#select1").get(0).options[i].selected = true; //i为索引值(从0开始)
根据text值
//根据text值
$('#test option[text="b"]').attr("selected",true);
$('#test').find('option[text="b"]').attr("selected",true);
但是以上两种方法在jquery低于1.4.2的版本(含)中有效,在更高版本中无效!
【高版本Jquery中解决办法:】
解决一:精确匹配,选择文本与所给字符串完全一样的option。
$('#select1 option').filter(function(){return $(this).text()=="亲友";}).attr("selected",true);
解决二:子串匹配,选择文本包含所给字符串的option。
$("#select1 option:contains('其他')").attr('selected', true);
解决三:自定义函数
$("#btn").click(function(){
var count=$("#select1").get(0).options.length;
for(var i=0;i<count;i++){
if($("#select1").get(0).options[i].text == "亲友")
{
$("#select1").get(0).options[i].selected = true;
break;
}
}
});
2.4、操作select option选项
$("#select_id").append("<option value='value'>text</option>"); //添加一项option
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的option
$("#select_id option[index='0']").remove();//删除索引值为0的option
$("#select_id option[value='3']").remove(); //删除值为3的option
$("#select_id option[text='4']").remove(); //删除text值为4的option
作者:JuanitaLee
链接:https://www.jianshu.com/p/51863ae82723
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
jquery chosen插件使用及select常用方法的更多相关文章
- jquery chosen 插件 动态设置+更新选项值
我要在表单里使用一个select下拉菜单(是不是multiple无所谓),所以选择了jquery chosen这个插件.现在有一个需求,需要根据表单的另一个域来动态加载该select元素的选项. 1 ...
- Jquery chosen动态设置值 select Ajax动态载入数据 设置chosen和获取他们选中的值
在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态载入option和对option的选中.可是由于项目中使用了jquery里的chosen()方法.怎么也无法实现效果 ...
- jquery chosen 插件多选初始化
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- [转载]Jquery Chosen 插件动态生成option或重新绑定
$(".chosen—select").find("option[value='1']").attr("selected", "s ...
- Jquery select chosen 插件注意点
<select style="width:200px;" name="carId" data-placeholder="选择车辆牌照" ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- jQuery插件:模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
- jQuery Validate 插件
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- 彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器
彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器 基于SharePoint平台开发时,人员选择器使用频率是非常高的,但是原生的人员选择器使用太麻 ...
随机推荐
- 前端使用crypto-js进行加解密
import CryptoJS from 'crypto-js' export const crypto = { options() { return { key: CryptoJS.enc.Utf8 ...
- PHP基础教程 常见PHP错误类型及屏蔽方法
程序只要在运行,就免不了会出现错误,错误很常见,比如Error,Notice,Warning等等.这篇文章兄弟连PHP培训 小编来跟大家具体说一下PHP的错误类型和屏蔽方法.在 PHP 中,主要有以下 ...
- 洛谷P1077 摆花——题解
题目传送 题目大意:有按顺序放的n种花,相同种类的花放一起,每种花最多放ai盆,共放了m盆花,求放花方案数. 求方案个数一般有以下思路:1.搜索:2.递推/动态规划:3.贪心:4.分治... 玄学估计 ...
- 滑动报 Unable to preventDefault inside passive event listener due to target being treated as passive 的解决方法
google浏览器滑动出现以下问题: 解决办法如下:在html元素下添加样式 touch-action: none; html{ touch-action:none; }
- 大型网站技术架构,4网站的高性能架构之Web前端性能优化
一般说来Web前端指网站业务逻辑之前的部分,包括浏览器加载.网站视图模型.图片服务.CDN服务等,主要优化手段有优化浏览器访问.使用反向代理.CDN等. 4.2.1 浏览器访问优化 1.减少http请 ...
- Linux内核调试方法总结之栈帧
栈帧 栈帧和指针可以说是C语言的精髓.栈帧是一种特殊的数据结构,在C语言函数调用时,栈帧用来保存当前函数的父一级函数的栈底指针,当前函数的局部变量以及被调用函数返回后下一条汇编指令的地址.如下图所示: ...
- 架构-数据库访问-SQL语言进行连接数据库服务器:SQL语言进行连接数据库服务器
ylbtech-架构-数据库访问-SQL语言进行连接数据库服务器:SQL语言进行连接数据库服务器 数据库和应用服务器的连接. 在基于三层构架的信息系统开发中,应用服务器要利用SQL语言进行连接数据库服 ...
- 运行jar包shell脚本
#!/bin/sh #该文件必须放在jar包的目录下,因为是以相对路径来运行的.不放jar包目录的话,可以直接在jar_name参数写绝对路径 #start 设置三个参数 #环境 profile=te ...
- base64编解码的两个函数(安全版本)
void base64_encode_s(const unsigned char *str, long inlen, std::string& outstr, long* lpBufLen) ...
- mysql5.7.23性能调优之innodb_buffer_pool_size
前言 我的数据库版本是5.7.23,最近发现执行SQL越来越慢,一条SQL语句执行需要将近30s. 对于原因,查询资料, https://www.cnblogs.com/qwangxiao/p/892 ...