(一)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. OOX之间的关系

    OOA,OOD,OOP三者关系OOA的分析结果可以作为OOD的需求模型OOD的设计结果作为OOP的指导蓝图OOP负责最终实现目标系统

  2. Codeforces Round #423 A Restaurant Tables(模拟)

    A. Restaurant Tables time limit per test 1 second memory limit per test 256 megabytes input standard ...

  3. 《深入浅出Nodejs》笔记——模块机制(2)

    前言 书上还有很大一部分讲了C/C++模块的编译过程.核心模块编写和C/C++扩展模块的内容,不过我对C++一窍不通因此没有仔细看,如果以后需要再自习看吧. 包与NPM 第三方模块中,模块和模块之间是 ...

  4. 安装zabbix监控系统

    环境 操作系统 最小化安装CentOS Linux release 7.2.1511 IP 192.168.88.1 zabbix版本 zabbix-3.4.4.tar.gz zabbix依赖于LNM ...

  5. 【Java NIO】一文了解NIO

    Java NIO 1 背景介绍 在上一篇文章中我们介绍了Java基本IO,也就是阻塞式IO(BIO),在JDK1.4版本后推出了新的IO系统(NIO),也可以理解为非阻塞IO(Non-Blocking ...

  6. Python开发基础-Day12模块1

    time模块 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串: (1)时间戳(timestamp) :通常来说,时间戳表示的是从1970年1月 ...

  7. angularjs学习笔记3-directive中scope的绑定修饰符

    在angularjs中,一个directive返回一个对象,对象存在很多属性,并且可以在directive中自定义自己的scope,而使用自己的scope是为了防止一个directive被使用在多个地 ...

  8. 【manacher】HDU4513-吉哥系列故事——完美队形II

    [题目大意] 求最长回文队伍且队伍由中间向两边递减. [思路] 和字符串一样的做法,在递推的时候增加判断条件:a[i-p[i]]<=a[i-p[i]+2]. #include<iostre ...

  9. 【贪心】POJ1328-Radar Installation

    [思路] 以每一座岛屿为圆心,雷达范围为半径作圆,记录下与x轴的左右交点.如果与x轴没交点,则直接退出输出“-1”.以左交点为关键字进行排序,从左到右进行贪心.容易知道,离每一个雷达最远的那一座岛与雷 ...

  10. HDU 5636 Shortest Path 暴力

    Shortest Path 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5636 Description There is a path graph ...