Home >Web Front-end >JS Tutorial >Summary of jQuery select operation control methods

Summary of jQuery select operation control methods

巴扎黑
巴扎黑Original
2017-06-29 10:07:371202browse

It should be noted that a lot of the code here is for versions before jquery 1.32 (later versions no longer support @), so just replace it with empty code and test it.

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

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 sets the Text and Value selected by Select:
Glossary explanation:

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 adds/delete the Option item of Select:
Glossary explanation:

1. $("#select_id").append("<option value=&#39;Value&#39;>Text</option>"); //为Select追加一个Option(下拉项) 
2. $("#select_id").prepend("<option value=&#39;0&#39;>请选择</option>"); //为Select插入一个Option(第一个位置) 
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 
4. $("#select_id option[index=&#39;0&#39;]").remove(); //删除Select中索引值为0的Option(第一个) 
5. $("#select_id option[value=&#39;3&#39;]").remove(); //删除Select中Value=&#39;3&#39;的Option 
5. $("#select_id option[text=&#39;4&#39;]").remove(); //删除Select中Text=&#39;4&#39;的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=&#39;111&#39;>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]")); 
} 
} 
//取得下拉选单的选取值 
$(#testSelect option:selected&#39;).text(); 
或$("#testSelect").find(&#39;option:selected&#39;).text(); 
或$("#testSelect").val();

/////////////////////////////////////////////////// ///////////////////
If you have a bad memory, you can save it:
1, drop-down box:

var cc1 = $(".formc select[@name=&#39;country&#39;] option[@selected]").text(); //得到
下拉菜单
的选中项的文本(注意中间有空格) 
var cc2 = $(&#39;.formc select[@name="country"]&#39;).val(); //得到下拉菜单的选中项的值 
var cc3 = $(&#39;.formc select[@name="country"]&#39;).attr("id"); //得到下拉菜单的选中项的ID属性值 
$("#select").empty();//清空下拉框//$("#select").html(&#39;&#39;); 
$("<option value=&#39;1&#39;>1111</option>").appendTo("#select")//添加下拉框的option

A little explanation:
1.select[@name='country'] option[@selected] means the option element with the selected attribute in the select element that has the name attribute,
and the attribute value is 'country' ;
It can be seen that anything starting with @ means that it is followed by attributes.

2, Radio button:
$("input[@type=radio][@checked]").val(); //Get the value of the selected item of the radio button (note the middle No spaces)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //Set the radio button value=2 to the selected state. (Note that there are no spaces in the middle)

3,Check box:
$("input[@type=checkbox][@checked]").val(); // Get the value of the first selected item of the check box
$("input[@type=checkbox][@checked]").each(function(){ //Because check boxes generally select multiple , so you can loop the output
alert($(this).val());
});

$("#chk1").attr("checked",''); //Uncheck
$("#chk2").attr("checked",true);//Check
if($("#chk1").attr('checked')== undefined){} //Judge whether it has been checked


Of course jquery's selector is powerful. There are many ways.

<script src="jquery-1.2.1.js" type="text/
javascript
"></script> 
<script language="javascript" type="text/javascript"> 
$(
document
).ready(function(){ 
$("#selectTest").change(function() 
{ 
//alert("Hello"); 
//alert($("#selectTest").attr("name")); 
//$("a").attr("href","xx.html"); 
//window.location.href="xx.html"; 
//alert($("#selectTest").val()); 
alert($("#selectTest option[@selected]").text()); 
$("#selectTest").attr("value", "2"); 
}); 
}); 
</script> 
<a href="#">aaass</a> 
<!--下拉框--> 
<select id="selectTest" name="selectTest"> 
<option value="1">11</option> 
<option value="2">22</option> 
<option value="3">33</option> 
<option value="4">44</option> 
<option value="5">55</option> 
<option value="6">66</option> 
</select>

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的项目为当前选中项
$("5f82d81061bb5b0e81dd28a03a1b9e8711114afa15d3069109ac30911f04c56f3338ffde645126e3a5d22e0fa10419cb8e14 22224afa15d3069109ac30911f04c56f3338").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

获取一组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的项目为当前选中项
$("46508805598f6c40e24d4c0fe896e9ca11114afa15d3069109ac30911f04c56f33386dbb54790dcf012238851e6699b7626822224afa15d3069109ac30911f04c56f3338").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

The above is the detailed content of Summary of jQuery select operation control methods. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn