(一)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控件的更多相关文章

  1. 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 ...

  2. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

  3. JQuery 操作基本控件

    根据控件的样式class获取控件 $(".className")......          //className代表的就是控件的样式 根据控件的ID获取控件 $(" ...

  4. jQuery操作select控件取值和设值

    1.级联select的操作,后一个select的值随着前一个select选中值变化 $(".select_A").change(function(){ $(".selec ...

  5. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  6. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  7. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  8. JQuery动态添加控件并取值

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. [WinForm]WinForm跨线程UI操作常用控件类大全

    前言 在C#开发的WinForm窗体程序开发的时候,经常会使用多线程处理一些比较耗时之类的操作.不过会有一个问题:就是涉及到跨线程操作UI元素. 相信才开始接触的人一定会遇上这个问题. 为了解决这个问 ...

随机推荐

  1. Ionic-wechat项目边开发边学(二):目录结构,header标签与路由

    之前一直跟Linux驱动打交道,上层应用几乎为零,业余时间也不是很多,所以博客也不会写的非常详细,大家有问题尽管评论哦, 我有空会及时回复! 摘要 上一篇文章主要介绍了ionic的开发环境配置, 以及 ...

  2. Linux操作命令(六)

    本次实验将介绍 Linux 命令中 wc 和 grep 命令的用法. wc grep 1.wc wc命令是一个统计的工具,主要用来显示文件所包含的行.字和字节数. wc命令是word count的缩写 ...

  3. HDU 2089 不要62【数位DP入门题】

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. linux 服务器之间文件传送

    linux 服务器之间文件传送免密码输入传递: expect -c " set timeout 10 spawn scp ××××××.tar.bz2 root@172.16.17.34:/ ...

  5. 一个微服务+DDD(领域驱动设计)的代码结构示例

    前有幸拜读过诸多大神关于DDD的实现落地等文章,学习较多,受益匪浅,在此推荐 : https://www.cnblogs.com/hafiz/p/9388334.htmlhttps://blog.cs ...

  6. TarjanLCA学习笔记

    1.前言 首先我们介绍的算法是LCA问题中的离线算法-Tarjan算法,该算法采用DFS+并查集,再看此算法之前首先你得知道并查集(尽管我相信你如果知道这个的话肯定是知道并查集的),Tarjan算法的 ...

  7. bzoj 2468: [中山市选2010]三核苷酸

    2468: [中山市选2010]三核苷酸 Description 三核苷酸是组成DNA序列的基本片段.具体来说,核苷酸一共有4种,分别用’A’,’G’,’C’,’T’来表示.而三核苷酸就是由3个核苷酸 ...

  8. JDK源码学习笔记——HashSet LinkedHashSet TreeSet

    你一定听说过HashSet就是通过HashMap实现的 相信我,翻一翻HashSet的源码,秒懂!! 其实很多东西,只是没有静下心来看,只要去看,说不定一下子就明白了…… HashSet 两个属性: ...

  9. Manthan, Codefest 16 C. Spy Syndrome 2 字典树 + dp

    C. Spy Syndrome 2 题目连接: http://www.codeforces.com/contest/633/problem/C Description After observing ...

  10. shell-网上lnmp一键安装讲解

    shell-网上lnmp一键安装讲解 #!/bin/bash PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/b ...