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?

    詳細請見下節


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM