淺析jQuery對(duì)select操作小結(jié)(遍歷option,操作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='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
}
}
//取得下拉選單的選取值
$('#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
//////////////////////////////////////////////////////////////////
記性不好的可以收藏下:
1,下拉框:
var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜單的選中項(xiàng)的文本(注意中間有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜單的選中項(xiàng)的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜單的選中項(xiàng)的ID屬性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option
稍微解釋一下:
1.select[@name='country'] option[@selected] 表示具有name 屬性,
并且該屬性值為'country' 的select元素 里面的具有selected 屬性的option 元素;
可以看出有@開(kāi)頭的就表示后面跟的是屬性。
2,單選框:
$("input[@type=radio][@checked]").val(); //得到單選框的選中項(xiàng)的值(注意中間沒(méi)有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //設(shè)置單選框value=2的為選中狀態(tài).(注意中間沒(méi)有空格)
3,復(fù)選框:
$("input[@type=checkbox][@checked]").val(); //得到復(fù)選框的選中的第一項(xiàng)的值
$("input[@type=checkbox][@checked]").each(function(){ //由于復(fù)選框一般選中的是多個(gè),所以可以循環(huán)輸出
alert($(this).val());
});
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判斷是否已經(jīng)打勾
當(dāng)然jquery的選擇器是強(qiáng)大的. 還有很多方法.
<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選中,及其相關(guān)獲取一組radio被選中項(xiàng)的值
var item = $('input[@name=items][@checked]').val();
獲取select被選中項(xiàng)的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二個(gè)元素為當(dāng)前選中值
$('#select_id')[0].selectedIndex = 1;
radio單選組的第二個(gè)元素為當(dāng)前選中值
$('input[@name=items]').get(1).checked = true;
獲取值:
文本框,文本區(qū)域:$("#txt").attr("value");
多選框checkbox:$("#checkbox_id").attr("value");
單選組radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控制表單元素:
文本框,文本區(qū)域:$("#txt").attr("value",'');//清空內(nèi)容
$("#txt").attr("value",'11');//填充內(nèi)容
多選框checkbox:$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判斷是否已經(jīng)打勾
單選組radio: $("input[@type=radio]").attr("checked",'2');//設(shè)置value=2的項(xiàng)目為當(dāng)前選中項(xiàng)
下拉框select:$("#sel").attr("value",'-sel3');//設(shè)置value=-sel3的項(xiàng)目為當(dāng)前選中項(xiàng)
$("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框
獲取一組radio被選中項(xiàng)的值
var item = $('input[@name=items][@checked]').val();
獲取select被選中項(xiàng)的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二個(gè)元素為當(dāng)前選中值
$('#select_id')[0].selectedIndex = 1;
radio單選組的第二個(gè)元素為當(dāng)前選中值
$('input[@name=items]').get(1).checked = true;
獲取值:
文本框,文本區(qū)域:$("#txt").attr("value");
多選框checkbox:$("#checkbox_id").attr("value");
單選組radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控制表單元素:
文本框,文本區(qū)域:$("#txt").attr("value",'');//清空內(nèi)容
$("#txt").attr("value",'11');//填充內(nèi)容
多選框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判斷是否已經(jīng)打勾
單選組radio: $("input[@type=radio]").attr("checked",'2');//設(shè)置value=2的項(xiàng)目為當(dāng)前選中項(xiàng)
下拉框select: $("#sel").attr("value",'-sel3');//設(shè)置value=-sel3的項(xiàng)目為當(dāng)前選中項(xiàng)
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框
- jQuery獲取select選中的option的value值實(shí)現(xiàn)方法
- JQuery動(dòng)態(tài)添加Select的Option元素實(shí)現(xiàn)方法
- JS & JQuery 動(dòng)態(tài)添加 select option
- jQuery操作Select的Option上下移動(dòng)及移除添加等等
- JQuery中對(duì)Select的option項(xiàng)的添加、刪除、取值
- 刪除select中所有option選項(xiàng)jquery代碼
- jQuery解決下拉框select設(shè)寬度時(shí)IE 6/7/8下option超出顯示不全
- JQuery操作Select的Options的Bug(IE8兼容性視圖模式)
- jquery操作select option 的代碼小結(jié)
- jQuery動(dòng)態(tài)產(chǎn)生select option下拉列表
相關(guān)文章
jQuery實(shí)時(shí)統(tǒng)計(jì)輸入框字?jǐn)?shù)及限制
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)時(shí)統(tǒng)計(jì)輸入框字?jǐn)?shù)及限制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06jQuery UI AutoComplete 自動(dòng)完成使用小記
jQuery UI AutoComplete 自動(dòng)完成使用小記,使用jquery的朋友實(shí)現(xiàn)搜索自動(dòng)完成等功能的朋友可以參考下。2010-08-08Jquery封裝tab自動(dòng)切換效果的具體實(shí)現(xiàn)
這篇文章介紹了Jquery封裝tab自動(dòng)切換效果的具體實(shí)現(xiàn)方法,有需要的朋友可以參考一下2013-07-07jQuery中需要注意的細(xì)節(jié)問(wèn)題小結(jié)
jQuery中需要注意的細(xì)節(jié)問(wèn)題小結(jié),使用jquery的朋友可以參考下。2011-12-12jQuery定義背景動(dòng)態(tài)切換效果的方法
這篇文章主要介紹了jQuery定義背景動(dòng)態(tài)切換效果的方法,實(shí)例分析了jQuery操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周?chē)蓟疑荒懿僮?
下面小編就為大家?guī)?lái)一篇Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周?chē)蓟疑荒懿僮?。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07jquery配合.NET實(shí)現(xiàn)點(diǎn)擊指定綁定數(shù)據(jù)并且能夠一鍵下載
本篇文章主要介紹了jquery配合.NET實(shí)現(xiàn)點(diǎn)擊指定綁定數(shù)據(jù)并且能夠一鍵下載,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-10-10