How to operate select with jquery?

How to operate select with jquery? The following article will introduce to you how to use jquery to operate select (get value, set selection). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

1. Basic value issues

For example<select class="selector"></ select>

1. Select the item with value set to pxx

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

2. Select the item set with text set to pxx

$(".selector").find("option:contains('pxx')").attr("selected",true);

Note : Previously$(".selector").find("option[text='pxx']").attr("selected",true);This way of writing is wrong. Currently, I personally confirm that input This method of obtaining attribute values ​​is supported: "input[text='pxx']", and "option:contains('pxx')" is required in select.

There is a usage of square brackets. The equal sign in the square brackets 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.

2. The cascade of select 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.

For example:

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

3. 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最大的索引值

4. jQuery sets the Text and Value selected by Select:

Grammar 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的项选中

5. jQuery adds/delete the Option item of Select:

Grammar 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

6. jquery radio value, checkbox value, select value, radio selection, checkbox selection, select selection, and related

1 Get the value of a group of radio selected items

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

2 Get the text of the selected item

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

3 The second element of the select drop-down box is currently selected Value

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

4 The second element of the radio radio group is the currently selected value

$('input[name=items]').get(1).checked = true;

7. Get the 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();

8. Control form elements:

Text box, text area:

$("#txt").attr("value",'');//清空内容 
$("#txt").attr("value",'11');//填充内容

Multiple selection box checkbox:

$("#chk1").attr("checked",'');//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

Single selection group radio:

$("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项

Drop-down box select:

$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 
$("<option value=&#39;1&#39;>1111</option><option value=&#39;2&#39;>2222</option>").appendTo("#sel")//添加下拉框的option 
$("#sel").empty()；//清空下拉框

9. Determine whether in select There is an option for a certain value:

function is_Exists(selectid,value){
  var theid='#'+selectid;
  var count=$(theid).get(0).options.length;
  var isExist = false;
  for(var i=0;i<count;i++){
    if ($(theid).get(0).options[i].value == value){
      isExist=true;
      break;
    }
  }
  return isExist;
}

Recommended learning: jQuery tutorial

The above is the detailed content of How to operate select with jquery?. For more information, please follow other related articles on the PHP Chinese website!