jquery操作select option 的代碼小結(jié)

更新時(shí)間：2011年06月21日 23:28:18 作者：

jquery操作select option 的代碼小結(jié),需要的朋友可以參考下。

1、獲取選中select的value和text,html代碼如下：

 
<select id="mySelect"> 
<option value="1">one</option> 
<option value="2">two</option> 
<option value="3">three</option> 
</select> 

則可通過以下script代碼s來獲取選中的value和text

復(fù)制代碼代碼如下:

 
$("#mySelect").val(); //獲取選中記錄的value值 
$("#mySelect option:selected").text(); //獲取選中記錄的text值 

2、運(yùn)用new Option("文本","值")方法添加選項(xiàng)option

復(fù)制代碼代碼如下:

 
var obj = document.getElementById("mySelect"); 
obj.add(new Option("4","4")); 

3、刪除所有選項(xiàng)option

復(fù)制代碼代碼如下:

 
var obj = document.getElementById("mySelect"); 
obj.options.length = 0; 

4、刪除選中選項(xiàng)option

復(fù)制代碼代碼如下:

 
var obj = document.getElementById("mySelect"); 
var index = obj.selectedIndex; 
obj.options.remove(index); 

5、修改選中選項(xiàng)option

復(fù)制代碼代碼如下:

 
var obj = document.getElementById("mySelect"); 
var index = obj.selectedIndex; 
obj.options[index] = new Option("three",3); //更改對(duì)應(yīng)的值 
obj.options[index].selected = true; //保持選中狀態(tài) 

6、刪除select

復(fù)制代碼代碼如下:

 
var obj = document.getElementById("mySelect"); 
obj.parentNode.removeChild(obj); //移除當(dāng)前對(duì)象 

7、select選擇的響應(yīng)事件

復(fù)制代碼代碼如下:

 
$("#mySelect").change(function(){ 
//添加所需要執(zhí)行的操作代碼 
}) 

您可能感興趣的文章:

相關(guān)文章

jquery tabs的實(shí)現(xiàn)代碼
晚上有插件可以實(shí)現(xiàn)"jquery tab"，但有點(diǎn)復(fù)雜了，我想寫個(gè)最簡(jiǎn)單的，來實(shí)現(xiàn)"jquery tab"。而事實(shí)上確實(shí)很簡(jiǎn)練
2009-05-05
jquery 將disabled的元素置為enabled的三種方法
在jquery中可以通過jqueryObj.attr("disabled","disabled")將頁(yè)面中某個(gè)元素置為不可編輯或觸發(fā)狀態(tài)，但是在jquery的API reference中并沒說明怎么將頁(yè)面置為disable的元素重新置為可觸發(fā)或可編輯的。
2009-07-07
jquery ui 1.7 ui.tabs 動(dòng)態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)
jquery ui 1.7 ui.tabs 動(dòng)態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-04-04
jQuery Tools tab(幻燈片)
老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西
2012-07-07
jQuery UI插件實(shí)現(xiàn)百度提詞器效果
這篇文章主要介紹了jQuery UI插件實(shí)現(xiàn)百度提詞器效果，每個(gè)輸入框中有相應(yīng)的文字提示,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過導(dǎo)航出現(xiàn)下拉菜單切換的效果,非常簡(jiǎn)潔自然,涉及jquery鼠標(biāo)hover事件及頁(yè)面元素樣式的動(dòng)態(tài)改變技巧,需要的朋友可以參考下
2015-08-08
jQuery實(shí)現(xiàn)點(diǎn)擊該行即可刪除HTML表格行
本節(jié)任務(wù)是從一個(gè)HTML表使用一些時(shí)髦的效果，只要按一下該行的行。以下是實(shí)現(xiàn)這一目標(biāo)的jQuery代碼
2014-10-10
JQuery為元素添加樣式的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query為元素添加樣式的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
jQuery UI工具提示框部件Tooltip Widget
這篇文章介紹了jQuery UI工具提示框部件Tooltip Widget，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
jquery實(shí)現(xiàn)隱藏與顯示動(dòng)畫效果/輸入框字符動(dòng)態(tài)遞減/導(dǎo)航按鈕切換
jquery實(shí)現(xiàn)隱藏顯示層動(dòng)畫效果、仿新浪字符動(dòng)態(tài)輸入、tab效果等等，以下為所有代碼，感興趣的朋友可以練練手哈，希望對(duì)大家學(xué)習(xí)有所幫助
2013-07-07