jquery怎麼操作select

jquery操作select的方法：1.設定value為pxx的項選中，程式碼為【$(".selector").val("pxx")】；2.設定text為pxx的項選中，程式碼為【$(".selector").find("option[te】。

#本教學操作環境：windows7系統、jquery3.2.1版本、thinkpad t480電腦。

相關免費學習推薦：javascript學習教學 、

jQuery教學

jquery操作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);
});

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選擇的Value4.

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("15ba1cdaec20352f688ebe8ab9039218Text4afa15d3069109ac30911f04c56f3338");

//為Select追加一個Option(下拉項目)

2.

$("#select_id").prepend("b93adbf83522c105f4709f0807fe84ae請選擇4afa15d3069109ac30911f04c56f3338");
• //為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
• jquery radio取值，checkbox取值，select取值，radio選中，checkbox選中，select選中，及其相關

  獲取一組radio被選中項的值

  var item = $('input[name=items][checked]').val();

  獲取select被選中項的文字

var item = $("select[name=items] option[selected]").text();

select下拉方塊的第二個元素為目前選取值

$('#select_id')[0].selectedIndex = 1;

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： $("input[type=radio]"). attr("checked",'2');//設定value=2的項目為目前選取項目###

下拉方塊select： $("#sel").attr("value",'-sel3');//設定value=-sel3的項目為目前選取項目

$("< ;option value='1'>11114afa15d3069109ac30911f04c56f33382eae82d737bc394734fed6d77327bb5322224afa15d3069109ac30911f04c56f3338").appendTo("#sel")//新增下拉框的option

$("#sel").empty()；//清空下拉框

更多程式相關知識，請造訪：程式設計教學！ ！

以上是jquery怎麼操作select的詳細內容。更多資訊請關注PHP中文網其他相關文章！