Detailed explanation of jquery operation select (including adding, deleting, clearing, value taking, etc.)

1. Select the item whose value is pxx.

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

2. Select the item whose text is pxx.

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

Here is a usage of square brackets. The equal sign in parentheses is preceded by the attribute name without quotation marks. Many times, the use of square brackets can make logic very simple.

3. Get the value of the currently selected item

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

4. Get the text of the currently selected item

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

The colon is used here. Mastering its usage and drawing inferences about other cases will also help The code becomes concise.

The cascade of selects is often used, that is, the value of the second select changes with the value selected by the first select. This is very simple in jquery.

$(".selector1").change(function(){
     // 先清空第二个
      $(".selector2").empty();
     // 实际的应用中，这里的option一般都是用循环生成多个了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});

jQuery gets the Text and Value selected by Select:
Syntax explanation:

$("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
var checkValue=$("#select_id").val();  //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值

jQuery sets the Text and Value selected by Select:
Syntax explanation:

$("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$("#select_id ").val(4);   // 设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中

jQuery adds/Deletes the Option item of Select:
Syntax explanation:

$("#select_id").append("<option value=&#39;Value&#39;>Text</option>");  //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value=&#39;0&#39;>请选择</option>");  //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
$("#select_id option[index=&#39;0&#39;]").remove();  //删除Select中索引值为0的Option(第一个)
$("#select_id option[value=&#39;3&#39;]").remove();  //删除Select中Value=&#39;3&#39;的Option
$("#select_id option[text=&#39;4&#39;]").remove();  //删除Select中Text=&#39;4&#39;的Option

jquery radio value, checkbox value, select value, radio selected, checkbox selected , select selected, and related
Get the value of a set of radio selected items
var item = $('input[name=items][checked]').val();
Get the selected item The text of the selected item
var item = $("select[name=items] option[selected]").text();
The second element of the select drop-down box is the currently selected value
$( '#select_id')[0].selectedIndex = 1;
The second element of the radio radio selection group is the currently selected value
$('input[name=items]').get(1).checked = true;
Get value:
Text box, text area: $("#txt").attr("value");
Multiple selection box checkbox: $("#checkbox_id").attr ("value");
Radio selection group radio: $("input[type=radio][checked]").val();
Drop-down box select: $('#sel').val( );
Control form elements:
Text box, text area: $("#txt").attr("value",'');//Clear content
$("#txt") .attr("value",'11');//Fill content
Multiple selection box checkbox: $("#chk1").attr("checked",'');//Uncheck
$("#chk2").attr("checked",true);//Check
if($("#chk1").attr('checked')==undefined) //Determine whether it has been checked Check
Radio selection group radio: $("input[type=radio]").attr("checked",'2');//Set the item with value=2 as the currently selected item
Drop-down box select ： $("#sel").attr("value",'-sel3');//Set the item with value=-sel3 as the currently selected item
$(" 11112222").appendTo("#sel")//Add the option of the drop-down box
$("#sel").empty( ); //Clear the drop-down box

The above is the detailed content of Detailed explanation of jquery operation select (including adding, deleting, clearing, value taking, etc.). For more information, please follow other related articles on the PHP Chinese website!