jquery操作select2控件
(一)select2常用的操作:添加、移除、获取选中的value()与text()
(1)移除事件:$("#select_id").unbind("change"); //为Select移除选择改变事件
unbind的用法:
①定义和用法
unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
ubind() 适用于任何通过 jQuery 附加的事件处理程序。
②取消绑定元素的事件处理程序和函数
规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。
语法:$(selector).unbind(event,function)
示例如下:
$("p").click(function(){
$(this).slideToggle();
});
$("button").click(function(){
$("p").unbind(); //取消元素‘p’的所有应用程序
});
③使用 Event 对象来取消绑定事件处理程序
规定要删除的事件对象。用于对自身内部的事件取消绑定(比如当事件已被触发一定次数之后,删除事件处理程序)。
如果未规定参数,则 unbind() 方法会删除指定元素的所有事件处理程序。
语法:$(selector).unbind(eventObj) 示例如下:
var x=0;
$("p").click(function(e){
$("p").animate({fontSize:"+=5px"}); //动态改变p标签中字体是属性
x++;
if (x>=2)
{
$(this).unbind(e); //this指点击的当前事件,此处用于取消点击事件
}
})
(2)添加事件
$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发;也可以说select_id值发生改变触发该事件
示例:
//jsp
<select id="druge" class="form-control input-sm" >
</select>
//js
$("#druge").change(function(){
var drugData = $(this).val(); //获取当前事件标签的值
alert("aaaaaaa");
})
(3) 获取选中项的相关属性:
$("#select_id").find("option:selected").text(); //获取Select选择的text()
$("#select_id").val(); //获取Select选择的Value()
$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
(4) JQuery获取select控件中特定的节点:
$("#select_id option:first").attr("index"); //获取Select最小的索引值
$("#select_id option:last").attr("index"); //获取Select最大的索引值
(5)JQuery设置Select控件选中的项(也就是为select赋初始值):
$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
$("#select_id ").val(4); // 设置Select的Value值为4的项选中
$("#select_id option[text='内容]").attr("selected", true); //设置Select的Text值为jQuery的项选中
(6) JQuery添加/删除Select的Option项:
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项),其中value,text是初始化的值
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
(二)禁用属性
可以设置禁用状态disabled,并且设置非常简单,如:$("#select_id").prop("disabled", false);
(三)赋初始值(默认值设置)
//单选情况
<select class="form-control input-sm" id="job" ></select>
(1)单选情况:$("#select2").val("初始值").trigger("change");
//多选情况,其中需要加入多选属性multiple="multiple"
<select class="form-control input-sm" id="job" multiple="multiple" ></select>
(2)多选选情况:$("#select2").val(["1","2"]).trigger("change"); 这样传递数组过去。
示例:
var jobs=jobId.split(","); //转换为数组,说明:"a,b,c,".split(",")结果为:['a','b','c'];可以发现,自动将结尾的空置去除,这与java中类似
$("#job").val(jobs).trigger("change"); //这里的jobs传入的一定要是数组
(四)重点:如何将数据中的数据取出,作为select2的option?
详细请见下节
jquery操作select2控件的更多相关文章
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
Jquery 操作Html 控件 CheckBox.Radio.Select 控件 在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件
在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...
- JQuery 操作基本控件
根据控件的样式class获取控件 $(".className")...... //className代表的就是控件的样式 根据控件的ID获取控件 $(" ...
- jQuery操作select控件取值和设值
1.级联select的操作,后一个select的值随着前一个select选中值变化 $(".select_A").change(function(){ $(".selec ...
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- 基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
- 一些基于jQuery开发的控件
基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...
- JQuery动态添加控件并取值
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- [WinForm]WinForm跨线程UI操作常用控件类大全
前言 在C#开发的WinForm窗体程序开发的时候,经常会使用多线程处理一些比较耗时之类的操作.不过会有一个问题:就是涉及到跨线程操作UI元素. 相信才开始接触的人一定会遇上这个问题. 为了解决这个问 ...
随机推荐
- 在ns2.35中添加myevalvid框架
在用ns2进行网络视频通信仿真的时候,先要为我们自己的ns2添加evalvid或者myevalvid框架.其中myevalvid框架是由柯志亨老师整合evalvid和ns2之后得出的新框架,笔者建议大 ...
- Java面向对象和特征
面向对象: 概念: 面向对象是一种程序设计思想,计算机程序的设计实质上就是将现实中的一些事物的特征抽离出来描述成一些计算机事件的过程,这种抽象的过程中,我们把具体的事物封装成一个一个的整体进行描述,使 ...
- logstash的grok正则匹配规则文件
文件路径:logstash/vendor/bundle/jruby/1.9/gems/logstash-patterns-core-4.1.0/patterns/grok-patterns 在线调试g ...
- DBCS 从256开始
ASCII(American Standard Code for Information Interchange,美国信息互换标准代码)是一套基于拉丁字母的字符编码,共收录了 128 个字符,用一个字 ...
- hdu 1965 (莫比乌斯函数 莫比乌斯反演)
GCD Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- Luogu P3960 列队 线段树
题面 线段树入门题. 我们考虑线段树来维护这个矩阵. 首先我们先定n+1棵线段树前n棵维护每行前m-1个同学中没有离队过的同学,还有一棵维护第m列中没有离队过的同学.再定n+1棵线段树前n棵线段树维护 ...
- 【分类讨论】Codeforces Round #407 (Div. 2) D. Weird journey
考虑这个二元组中有一者是自环,则必然合法. 考虑这两条边都不是自环,如果它们不相邻,则不合法,否则合法. 坑的情况是,如果它是一张完整的图+一些离散的点,则会有解,不要因为图不连通,就误判成无解. # ...
- [WikiOI "天梯"1281] Xn数列
题目描述Description 给你6个数,m, a, c, x0, n, g Xn+1 = ( aXn + c ) mod m,求Xn m, a, c, x0, n, g<=10^18 输入描 ...
- mongo基础---增删改查
正文 MongoDB 是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB是一个介于关系型数据库和非关系数据库之间的产品,是非关系数据 ...
- C++ cout输出保留小数
参考: http://www.cnblogs.com/wushuaiyi/p/4439361.html http://blog.csdn.net/edricbjtu/article/details/4 ...