jquery operation select value and setting selected instance analysis

jquery operation select (add, delete, clear)

jQueryGet Select selected Text and Value: ##

$("#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 Add /Delete the Option item of Select:

$("#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;的Optiona 

$("#select_id option[text=&#39;4&#39;]").remove(); //删除Select中Text=&#39;4&#39;的Optiona

Clear the content:

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

Every time

operates select Sometimes, I always have to go out and look through the information. Why not summarize it myself, and I will read it here in the future.

For example

1. Set the item with value to pxx to select

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

2. Set Text is selected for the pxx item

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

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.

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);
});

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选择的Textvar 
checkValue=$("#select_id").val();  //获取Select选择的Valuevar 
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 Value:

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/delete 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 group of radio selected items

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

Get 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 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();
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()；//清空下拉框

The above is the detailed content of jquery operation select value and setting selected instance analysis. For more information, please follow other related articles on the PHP Chinese website!