jquery 操作select

摘抄1

1. $("#select_id").change(function(){... });   //為select新增事件，當選擇其中一項時觸發
2. $("#select_id").find("option:selected").text();  //獲取select選中的Text
3. $("#select_id").val();  //獲取Select選中的Value
4. $("#select_id ").get(0).selectedIndex;  //獲取Select選中的索引值
5. $("#select_id option:last").attr("index");  //獲取Select最大的索引值

6.$("#select_id ").get(0).selectedIndex=1;  //設定Select索引值為1的項選中
7. $("#select_id ").val(4);   //設定Select的Value值為4的項選中
8. $("#select_id option[text='jQuery']").attr("selected", true);   //設定Select的Text值為jQuery的項選中

$("#tradeType option[value='1']").attr("selected", true); //設定select的value值為1時被選中

9.$("#select_id").append("<option value='Value'>Text</option>");  //為Select追加一個Option(下拉項)
10. $("#select_id").prepend("<option value='0'>請選擇</option>");  //為Select插入一個Option(第一個位置)
11. $("#select_id option:last").remove();  //刪除Select中索引值最大Option(最後一個)
12. $("#select_id option[index='0']").remove();  //刪除Select中索引值為0的Option(第一個)
13. $("#select_id option[value='3']").remove();  //刪除Select中Value='3'的Option
14. $("#select_id option[text='4']").remove();  //刪除Select中Text='4'的Option

15.遍歷select

$("#typeId option").each(function(){
        if($(this).text()=="遊戲娛樂"){
           $(this).attr("selected", true);
        }

});

jQuery是如何控制和操作select的。先看下面的html程式碼

<select id="test">
<option value="1">選項一<option>
<option value="2">選項一<option>
                          ...
<option value="n">選項N<option>
</select>

所謂jQuery操作“select”, 說的更確切一些是應該是jQuery控制 “option”， 看下面的jQuery程式碼：

//獲取第一個option的值
$('#test option:first').val();

//最後一個option的值
$('#test option:last').val();

//獲取第二個option的值
$('#test option:eq(1)').val();

//獲取選中的值
$('#test').val();
$('#test option:selected').val();

//設定值為2的option為選中狀態
$('#test').attr('value','2');

//設定最後一個option為選中
$('#test option:last').attr('selected','selected');
$("#test").attr('value' , $('#test option:last').val());
$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());

//獲取select的長度
$('#test option').length;

//新增一個option
$("#test").append("<option value='n+1'>第N+1項</option>");
$("<option value='n+1'>第N+1項</option>").appendTo("#test");

//添除選中項
$('#test option:selected').remove();

//刪除項選中(這裡刪除第一項)
$('#test option:first').remove();、

//指定值被刪除
$('#test option').each(function(){
    if( $(this).val() == '5'){
         $(this).remove();
     }
});
$('#test option[value=5]').remove();

//獲取第一個Group的標籤
$('#test optgroup:eq(0)').attr('label');

//獲取第二group下面第一個option的值
$('#test optgroup:eq(1) : option:eq(0)').val();

比如<select class="selector"></select>

1、設定value為pxx的項選中

     $(".selector").val("pxx");

2、設定text為pxx的項選中

    $(".selector").find("option[text='pxx']").attr("selected",true);

    這裡有一箇中括號的用法，中括號裡的等號的前面是屬性名稱，不用加引號。很多時候，中括號的運用可以使得邏輯變得很簡單。

3、獲取當前選中項的value

    $(".selector").val();

4、獲取當前選中項的text

    $(".selector").find("option:selected").text();

    這裡用到了冒號，掌握它的用法並舉一反三也會讓程式碼變得簡潔。

很多時候用到select的級聯，即第二個select的值隨著第一個select選中的值變化。這在jquery中是非常簡單的。

如：$(".selector1").change(function(){

     // 先清空第二個

      $(".selector2").empty();

     // 實際的應用中，這裡的option一般都是用迴圈生成多個了

      var option = $("<option>").val(1).text("pxx");

      $(".selector2").append(option);

});

1. // 新增  
2. function col_add() {  
3.     var selObj = $("#mySelect");  
4.     var value="value";  
5.     var text="text";  
6.     selObj.append("<option value='"+value+"'>"+text+"</option>");  
7. }  
8. // 刪除  
9. function col_delete() {  
10.     var selOpt = $("#mySelect option:selected");  
11.     selOpt.remove();  
12. }  
13. // 清空  
14. function col_clear() {  
15.     var selOpt = $("#mySelect option");  
16.     selOpt.remove();  
17. }  

1、獲取某個選中的值：

$("select[name=serviceComponent]").val()  

$("#uiType_id").find('option:selected').val()(*我最喜歡)

$("select#uiType_id option:selected").val()  

2、獲取當前選中的索引值$("select#uiType_id ").get(0).selectedIndex

3、獲取當前的長度$("select#uiType_id ").options.length

4、後臺獲取根據name  :request.getParameter("uiType")