JQuery 操作select標(biāo)簽實(shí)現(xiàn)代碼
更新時(shí)間：2010年05月14日 11:17:03 作者：
我們經(jīng)常遇到要操作DOM元素，例如<select>，在Asp.net中Dropdownlist原型就是select。
下面幾個(gè)常用的代碼或許對您有幫助：
//1.獲取選中option值
$('#selectList').val();
//2.獲取選中option的文本
$('#selectList :selected').text();
//3.獲取多個(gè)選中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.使用選項(xiàng)option的條件表達(dá)式
switch ($('#selectList :selected').text()) {
case 'First Option':
//do something
break;
case 'Something Else':
// do something else
break;
}
//5.刪除某個(gè)value=2的option
$("#selectList option[value='2']").remove();
//6.從list A 移動(dòng)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.獲取多個(gè)選中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.使用選項(xiàng)option的條件表達(dá)式
switch ($('#selectList :selected').text()) {
case 'First Option':
//do something
break;
case 'Something Else':
// do something else
break;
}
//5.刪除某個(gè)value=2的option
$("#selectList option[value='2']").remove();
//6.從list A 移動(dòng)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)文章
這篇文章主要為大家詳細(xì)介紹了jQuery輪播圖功能實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
淺析JQuery獲取和設(shè)置Select選項(xiàng)的常用方法總結(jié)
本篇文章是對JQuery獲取和設(shè)置Select選項(xiàng)的一些常用方法進(jìn)行了匯總介紹，有需要的朋友可以參考一下2013-07-07
jquery控制頁面的展開和隱藏實(shí)現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實(shí)現(xiàn)方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
jquery 動(dòng)態(tài)遍歷select 賦值的實(shí)例
今天小編就為大家分享一篇jquery 動(dòng)態(tài)遍歷select 賦值的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
checkbox全選反選的文章在以前也有介紹很多，實(shí)在是不想在提起了，然而身邊還是有些朋友不會(huì)，于是3分鐘寫出來一個(gè)估計(jì)有很多bug2013-10-10
jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨(dú)有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對象；2009-04-04
jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄,結(jié)合實(shí)例形式分析了jQuery針對頁面元素動(dòng)態(tài)遍歷、排序等相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下2018-04-04
jQuery實(shí)現(xiàn)的自定義滾動(dòng)條實(shí)例詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義滾動(dòng)條,結(jié)合完整實(shí)例詳細(xì)分析了jQuery自定義滾動(dòng)條的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并給出了jquery.jscroll.js插件的完整代碼,需要的朋友可以參考下2016-09-09
jQuery使用jsonp實(shí)現(xiàn)百度搜索的示例代碼
這篇文章主要介紹了jQuery使用jsonp實(shí)現(xiàn)百度搜索，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了jquery驗(yàn)證郵箱格式并顯示提交按鈕，只有輸入email地址正確才顯示提交按鈕演示，感興趣的小伙伴們可以參考一下2015-11-11