jquery獲得select option的值 和對select option的操作

g3mc 9年前發布 | 3K 次閱讀 JavaScript

    jQuery獲取Select元素,并選擇的Text和Value:

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

jQuery獲取Select元素,并設置的 Text和Value:   
實例分析:   
1. $("#select_id ").get(0).selectedIndex=1;  //設置Select索引值為1的項選中   
2. $("#select_id ").val(4);   // 設置Select的Value值為4的項選中   
3. $("#select_id option[text='jQuery']").attr("selected", true);   //設置Select的Text值為jQuery的項選中   

jQuery添加/刪除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中索引值最大Option(最后一個)   
4. $("#select_id option[index='0']").remove();  //刪除Select中索引值為0的Option(第一個)   
5. $("#select_id option[value='3']").remove();  //刪除Select中Value='3'的Option   
6. $("#select_id option[text='4']").remove();  //刪除Select中Text='4'的Option   


三級分類 <select name="thirdLevel" id="thirdLevel"   
onchange="getFourthLevel()">   
<option value="0" id="thirdOption">   
請選擇三級分類   
</option>   
</select>   
</div>   

四級分類:   
<select name="fourthLevelId" id="fourthLevelId">   
<option value="0" id="fourthOption">   
請選擇四級分類   
</option>   
</select>   

</div>   

.if($("#thirdLevel").val()!=0){   
$("#thirdLevel option[value!=0]").remove();   
}   
if($("#fourthLevelId").val()!=0){   
$("#fourthLevelId option[value!=0]").remove();   
}//這個表示:假如我們希望當選擇選擇第三類時:如果第四類中有數據則刪除,如果沒有數據第四類的商品中的為默認值。在后面學習了AJAX技術后經常會使用到!  



獲取Select :  

 獲取select 選中的 text :  

   $("#ddlRegType").find("option:selected").text();  



 獲取select選中的 value:  

   $("#ddlRegType ").val();  



 獲取select選中的索引:  

     $("#ddlRegType ").get(0).selectedIndex;  



設置select:  

 設置select 選中的索引:  

     $("#ddlRegType ").get(0).selectedIndex=index;//index為索引值  



 設置select 選中的value:  

    $("#ddlRegType ").attr("value","Normal“);  

    $("#ddlRegType ").val("Normal");  

    $("#ddlRegType ").get(0).value = value;  



 設置select 選中的text:  

var count=$("#ddlRegType option").length;  

  for(var i=0;i<count;i++)    
     {           if($("#ddlRegType ").get(0).options[i].text == text)    
        {    
            $("#ddlRegType ").get(0).options[i].selected = true;    

            break;    
        }    
    }  



$("#select_id option[text='jQuery']").attr("selected", true);  



設置select option項:  



 $("#select_id").append("<option value='Value'>Text</option>");  //添加一項option  

 $("#select_id").prepend("<option value='0'>請選擇</option>"); //在前面插入一項option  

 $("#select_id option:last").remove(); //刪除索引值最大的Option  

 $("#select_id option[index='0']").remove();//刪除索引值為0的Option  

 $("#select_id option[value='3']").remove(); //刪除值為3的Option  

 $("#select_id option[text='4']").remove(); //刪除TEXT值為4的Option  



清空 Select:  

$("#ddlRegType ").empty();  



jquery獲得值:  

.val()  

.text()  



設置值   

.val('在這里設置值')  





$("document").ready(function(){   
$("#btn1").click(function(){   
$("[name='checkbox']").attr("checked",'true');//全選   
})   
$("#btn2").click(function(){   
$("[name='checkbox']").removeAttr("checked");//取消全選   
})   
$("#btn3").click(function(){   
$("[name='checkbox']:even").attr("checked",'true');//選中所有奇數   
})   
$("#btn4").click(function(){   
$("[name='checkbox']").each(function(){//反選   
if($(this).attr("checked")){   
$(this).removeAttr("checked");   
}   
else{   
$(this).attr("checked",'true');   
}   
})   
})   
$("#btn5").click(function(){//輸出選中的值   
var str="";   
$("[name='checkbox'][checked]").each(function(){   
str+=$(this).val()+"\r\n";   
//alert($(this).val());   
})   
alert(str);   
})   
})   </pre> 


 本文由用戶 g3mc 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!