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控件

相关文章