很多朋友對jquery select的操作很有興趣,但網路上的東西太多,所以腳本之家特別將Jquery Select操作方法整理下,方便大家找。
要注意的是,這裡的程式碼好多是針對jquery 1.32以前的版本(以後的版本已經不支援@),所以替換為空測試下即可。
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("" ); //為Select追加一個Option(下拉項目)
2. $("#select_id").prepend(""); / /為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
5. $("#select_id option[text='4']").remove(); //刪除Select中Text='4'的Option
//遍歷option與新增、移除option
function changeShipMethod(shipping){
var len = $("select[@ name=ISHIPTYPE] option").length
if(shipping.value != "CA"){
$("select[@name=ISHIPTYPE] option").each(function(){
if($(this).val() == 111){
$(this).remove();
}
});
}else{
$("< ;option value='111'>UPS Ground").appendTo($("select[@name=ISHIPTYPE]"));
}
}
#//取得下拉式選單的選取值
$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected') .text();
或$("#testSelect").val();
////////////////////////// ////////////////////////////////////////
記性不好的可以收藏下:
1,下拉方塊:
var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉選單的選取項目的文字(注意中間有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉式選單的選中項目的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉式選單的選取項目的ID屬性值
$( "#select").empty();//清空下拉框//$("#select").html('');
$("
以上是使用select操作控制方法用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!