JQuery 操作select標(biāo)簽實現(xiàn)代碼
更新時間:2010年05月14日 11:17:03 作者:
我們經(jīng)常遇到要操作DOM元素,例如<select>,在Asp.net中Dropdownlist原型就是select。
下面幾個常用的代碼或許對您有幫助:
//1.獲取選中option值
$('#selectList').val();
//2.獲取選中option的文本
$('#selectList :selected').text();
//3.獲取多個選中option值、文本
var foo = [];
$('#multiple :selected').each(function(i, selected) {
foo[i] = $(selected).text();
});
// to get the selected values, just use .val() - this returns a string or array
foo = $('#multiple :selected').val();
//4.使用選項option的條件表達(dá)式
switch ($('#selectList :selected').text()) {
case 'First Option':
//do something
break;
case 'Something Else':
// do something else
break;
}
//5.刪除某個value=2的option
$("#selectList option[value='2']").remove();
//6.從list A 移動option到 list B.
// here we have 2 select lists and 2 buttons. If you click the “add” button,
// we remove the selected option from select1 and add that same option to select2.
// The “remove” button just does things the opposite way around.
// Thanks to jQuery's chaining capabilities, what was once a rather tricky undertaking with JS can now be done in 6 lines of code.
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').appendTo('#select1');
});
});
復(fù)制代碼 代碼如下:
//1.獲取選中option值
$('#selectList').val();
//2.獲取選中option的文本
$('#selectList :selected').text();
//3.獲取多個選中option值、文本
var foo = [];
$('#multiple :selected').each(function(i, selected) {
foo[i] = $(selected).text();
});
// to get the selected values, just use .val() - this returns a string or array
foo = $('#multiple :selected').val();
//4.使用選項option的條件表達(dá)式
switch ($('#selectList :selected').text()) {
case 'First Option':
//do something
break;
case 'Something Else':
// do something else
break;
}
//5.刪除某個value=2的option
$("#selectList option[value='2']").remove();
//6.從list A 移動option到 list B.
// here we have 2 select lists and 2 buttons. If you click the “add” button,
// we remove the selected option from select1 and add that same option to select2.
// The “remove” button just does things the opposite way around.
// Thanks to jQuery's chaining capabilities, what was once a rather tricky undertaking with JS can now be done in 6 lines of code.
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').appendTo('#select1');
});
});
如果您不了解JQuery,可以先看它的文檔。
希望這篇POST對您有幫助。
相關(guān)文章
jquery實現(xiàn)自定義樹形表格的方法【自定義樹形結(jié)構(gòu)table】
這篇文章主要介紹了jquery實現(xiàn)自定義樹形表格的方法,結(jié)合實例形式分析了jQuery創(chuàng)建自定義樹形結(jié)構(gòu)table的相關(guān)操作技巧,需要的朋友可以參考下2019-07-07jQuery EasyUI常用數(shù)據(jù)驗證匯總
這篇文章主要為大家詳細(xì)匯總了jQuery EasyUI常用數(shù)據(jù)驗證,介紹了validatebox()提供的自定義驗證,感興趣的小伙伴們可以參考一下2016-09-09推薦40個非常優(yōu)秀的jQuery插件和教程【系列三】
jQuery 在如今的 Web 開發(fā)項目中扮演著重要角色,jQuery 以其插件眾多、獨特、輕量以及支持大規(guī)模的網(wǎng)站開發(fā)聞名。本文大家分享40個實用的 jQuery 插件,可以根據(jù)您的項目需要來選擇使用2011-11-11jQuery.fn和jQuery.prototype區(qū)別介紹
jQuery.fn和jQuery.prototype想必大家對它并不陌生吧,那么你們知道它們之間的區(qū)別嗎?在本文有個不錯的示例大家可以參考下2013-10-10jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
這篇文章主要介紹了使用jquery實現(xiàn)的鼠標(biāo)放上去顯示懸浮層即彈出定位的div層,需要的朋友可以參考下2014-04-04使用jQuery將多條數(shù)據(jù)插入模態(tài)框的實現(xiàn)代碼
這篇文章主要介紹了使用jQuery將多條數(shù)據(jù)插入模態(tài)框的方法,很簡單,很實用,需要的朋友可以參考下2014-10-10Jquery promise實現(xiàn)一張一張加載圖片
通過jquery promise實現(xiàn)一張一張的連續(xù)圖片的加載功能,當(dāng)圖片加載錯誤,超時后會顯示加載圖片加載失敗。對jquery promise實現(xiàn)加載圖片的相關(guān)資料感興趣的朋友參考下2015-11-11