JQuery操作下拉框
要實現(xiàn)這種效果：
?
HTML：
<script src="js/jquery-1.7.2.min.js"></script> <table><tr><td><!--multiple設(shè)定下拉框可以多選，size設(shè)定下拉框不呈現(xiàn)下拉方式，--><select size="12" id="One" multiple="multiple"><option>蘋果</option><option>香蕉</option><option>橘子</option></select></td><td><input type="button" value=">>>"><br><input type="button" value=" > "><br><input type="button" value=" < "><br><input type="button" value="<<<"><br></td><td><select size="12" id="two" multiple="multiple"><option>葡萄</option></select></td><td><input type="button" value=" up "><br><br><input type="button" value="down"><br></td></tr></table>
Jquery代碼
<script type="text/javascript">//單選（向右移動數(shù)據(jù)）$(function(){$(":button:eq(1)").bind("click",function(){$("select:eq(0) :selected").appendTo($("select:eq(1)"));});//單選（向左移動數(shù)據(jù)）$(":button:eq(2)").bind("click",function(){$("select:eq(1) :selected").appendTo($("select:eq(0)"));});});/*//全選（向右移動數(shù)據(jù)）$(function(){$(":button:eq(0)").bind("click",function(){$("#One option").appendTo($("#two"));});});*///全選（向右移動數(shù)據(jù)）$(function(){$(":button:eq(0)").bind("click",function(){$("select:eq(0) option").appendTo($("select:eq(1)"));});});//全選（向左移動數(shù)據(jù)）$(function(){$(":button:eq(3)").bind("click",function(){$("#two option").appendTo($("#One"));});$(function(){//向上走$(":button:eq(4)").click(function(){$("select:eq(1) :selected").insertBefore($("select:eq(1) :selected").prev());}),$(":button:eq(5)").click(function(){//向下走//我之前是這樣做的，所以錯了// $("select:eq(1) :selected").insertAfter($("select:eq(1) :selected").prev());//往下走，正確的是這樣(next屬性方法是往下走，prev()是往上走)$("select:eq(1) :selected").insertAfter($("select:eq(1) :selected").next());});});});</script>
知識點：
jQuery獲取Select選擇的Text和Value:
語法解釋：
1.? $("#select_id").change(function(){//code...});???//為Select添加事件，當(dāng)選擇其中一項時觸發(fā)
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設(shè)置Select選擇的?Text和Value:
語法解釋：
1.?$("#select_id? ").get(0).selectedIndex=1;??//設(shè)置Select索引值為1的項選中
2.?$("#select_id?").val(4);??? //?設(shè)置Select的Value值為4的項選中
3.?$("#select_id? option[text='jQuery']").attr("selected",?true);???//設(shè)置Select的Text值為jQuery的項選中 |
4.?$("select option:first").prop("selected", 'selected'); 設(shè)置select中的第一個option被選中
?
jQuery添加/刪除Select的Option項：
語法解釋：
1.? $("#select_id").append("<option?value='Value'>Text</option>");?? //為Select追加一個Option(下拉項)
2.?$("#select_id").prepend("<option? value='0'>請選擇</option>");??//為Select插入一個Option(第一個位置)
3.? $("#select_id?option:last").remove();??//刪除Select中索引值最大Option(最后一個)
4.? $("#select_id?option[index='0']").remove();??//刪除Select中索引值為0的Option(第一個)
5.? $("#select_id?option[value='3']").remove();?? //刪除Select中Value='3'的Option
5.?$("#select_id?option[text='4']").remove();?? //刪除Select中Text='4'的Option?
http://www.cnblogs.com/SAL2928/archive/2008/10/28/1321285.html?
jquery? radio取值，checkbox取值，select取值，radio選中，checkbox選中，select選中，及其相關(guān)?
獲? 取一組radio被選中項的值?
var?item?=?$('input[name=items][checked]').val();?
獲? 取select被選中項的文本?
var?item?=?$("select[name=items]?option[selected]").text();??
select下拉框的第二個元素為當(dāng)前選中值?
$('#select_id')[0].selectedIndex?=?1;??
radio單選組的第二個元素為當(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的項目為當(dāng)前選中項?
下拉框? select：???$("#sel").attr("value",'-sel3');//設(shè)置value=-sel3的項目為當(dāng)前選中項??
$("<option?value='1'>1111</option><option? value='2'>2222</option>").appendTo("#sel")//添加下拉框的option??
$("#sel").empty()；//清空下拉框?
----------------------------------------------------------------------------------------------------?
//遍歷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();?//得到下拉菜單的選中項的文本(注意中間有空格)
var?cc2?=?$('.formc? select[name="country"]').val();?//得到下拉菜單的選中項的值
var?cc3?=?$('.formc? select[name="country"]').attr("id");? //得到下拉菜單的選中項的ID屬性值
$("#select").empty();//清空下拉框? //$("#select").html('');
$("<option? value='1'>1111</option>").appendTo("#select")//添加下拉框的option?
稍微解釋一下:
1.select[name='country']?option[selected]? 表示具有name?屬性，
并?且該屬性值為'country'?的select元素?里面的具有selected?屬性的option?元素；?
2,單選框:
$("input[@type=radio][@checked]").val();? //得到單選框的? 選中項的值(注意中間沒有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked');? //設(shè)置單選框value=2的為選中狀態(tài).(注意中間沒有空格)?
3,復(fù)選框:
$("input[@type=checkbox][@checked]").val();? //得到復(fù)選框的選中的第一項的值
$("input[@type=checkbox][@checked]").each(function()?{? //由于復(fù)選框一般選中的是多個,所以可以循環(huán)輸出
alert($(this).val());
});?
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//? 打勾
if($("#chk1").attr('checked')==undefined){}?//判斷是否已經(jīng)打勾?
當(dāng)然jquery的選擇器是強大的.?還有很多方法.?
<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被選中? 項的值
var?item?=?$('input[@name=items][@checked]').val();
獲取select被選? 中項的文本
var?item?=?$("select[@name=items]?option[@selected]").text();
select? 下拉框的第二個元素為當(dāng)前選中值
$('#select_id')[0].selectedIndex?=?1;
radio單選組的第二個? 元素為當(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的項目為當(dāng)前選中項
下拉框?select：? $("#sel").attr("value",'-sel3');//設(shè)置value=-sel3的項目為當(dāng)前選中項
$("<optionvalue='1'&? gt;1111</option><optionvalue='2'>2222</option&? gt;").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//?清空下拉框?
獲取一組radio被選中項的值
var?item?=? $('input[@name=items][@checked]').val();
獲取select被選中項的文本
var?item?=? $("select[@name=items]?option[@selected]").text();
select下拉框的第二個元素為當(dāng)? 前選中值
$('#select_id')[0].selectedIndex?=? 1;
radio單選組的第二個元素為當(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的項目為當(dāng)前選中項
下拉框?select：? $("#sel").attr("value",'-sel3');//設(shè)置value=-sel3的項目為當(dāng)前選中項
$("<option? value='1'>1111</option><option? value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//? 清空下拉框?
轉(zhuǎn)載于:https://www.cnblogs.com/cxx328/p/6495194.html
總結(jié)
以上是生活随笔為你收集整理的JQuery操作下拉框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 观《逻辑思维，如何成为一个高手》
- 下一篇： 《重到城七绝句·张十八》是谁的作品？