jquery操作select(取值,設置選中)

一、基礎取值問題

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

1、設置value爲pxx的項選中
$(".selector").val("pxx");

2、設置text爲pxx的項選中  $(".selector").find("option[text='pxx']").attr("selected",true);
$("#ownerType").find("option[value='01']").attr("selected",true);

3、獲取當前選中項的value
$(".selector").val();

4、獲取當前選中項的text
$(".selector").find("option:selected").text();

二、select的級聯

如:$(".selector1").change(function(){
     // 先清空第二個
      $(".selector2").empty();
     // 實際的應用中,這裏的option一般都是用循環生成多個了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});

三、jQuery獲取Select選擇的Text和Value

//爲Select添加事件,當選擇其中一項時觸發
1. $("#select_id").change(function(){//code...});   
//獲取Select選擇的Text
2. $("#select_id").find("option:selected").text();
//獲取Select選擇的Value  
3. var checkValue=$("#select_id").val();  
//獲取Select選擇的索引值
4. var checkIndex=$("#select_id ").get(0).selectedIndex; 
//獲取Select最大的索引值 
5. var maxIndex=$("#select_id option:last").attr("index");  

四、jQuery設置Select選擇的 Text和Value

//設置Select索引值爲1的項選中
1. $("#select_id ").get(0).selectedIndex=1;  
// 設置SelectValue值爲4的項選中
2. $("#select_id ").val(4);   
 //設置Select的Text值爲jQuery的項選中
3. $("#select_id option[text='jQuery']").attr("selected", true);  

五、jQuery添加/刪除Select的Option項

//爲Select追加一個Option(下拉項)
1. $("#select_id").append("<option value='Value'>Text</option>"); 
//爲Select插入一個Option(第一個位置) 
2. $("#select_id").prepend("<option value='0'>請選擇</option>");  
//刪除Select中索引值最大Option(最後一個)
3. $("#select_id option:last").remove();  
//刪除Select中索引值爲0Option(第一個)
4. $("#select_id option[index='0']").remove(); 
//刪除SelectValue='3'Option 
5. $("#select_id option[value='3']").remove();  
//刪除Select中Text='4'Option
6. $("#select_id option[text='4']").remove();  

六、jquery radio取值,checkbox取值,select取值,radio選中,checkbox選中,select選中,及其相關

1.獲取一組radio被選中項的值 
var item = $('input[name=items][checked]').val(); 

2.獲取select被選中項的文本 
var item = $("select[name=items] option[selected]").text();

3.select下拉框的第二個元素爲當前選中值 
$('#select_id')[0].selectedIndex = 1; 

4.radio單選組的第二個元素爲當前選中值 
$('input[name=items]').get(1).checked = true; 

七、獲取值

文本框,文本區域:$("#txt").attr("value"); 
多選框 checkbox:$("#checkbox_id").attr("value"); 
單選組radio:   $("input[type=radio][checked]").val(); 
下拉框select: $('#sel').val(); 

八、控制表單元素

文本框,文本區域:$("#txt").attr("value",'');//清空內容 
               $("#txt").attr("value",'11');//填充內容 

多選框checkbox: $("#chk1").attr("checked",'');//不打勾 
               $("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr('checked')==undefined) //判斷是否已經打勾 

單選組 radio://設置value=2的項目爲當前選中項 $("input[type=radio]").attr("checked",'2');

下拉框 select://設置value=-sel3的項目爲當前選中項 $("#sel").attr("value",'-sel3');

//添加下拉框的option 
$("<option value='1'>1111</option>
<option value='2'>2222</option>").appendTo("#sel")

//清空下拉框
$("#sel").empty();
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章