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
$("#mySelect").val(); //獲取選中記錄的value值
$("#mySelect option:selected").text(); //獲取選中記錄的text值
2、運(yùn)用new Option("文本","值")方法添加選項(xiàng)option
var obj = document.getElementById("mySelect");
obj.add(new Option("4","4"));
3、刪除所有選項(xiàng)option
var obj = document.getElementById("mySelect");
obj.options.length = 0;
4、刪除選中選項(xiàng)option
var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options.remove(index);
5、修改選中選項(xiàng)option
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
var obj = document.getElementById("mySelect");
obj.parentNode.removeChild(obj); //移除當(dāng)前對(duì)象
7、select選擇的響應(yīng)事件
$("#mySelect").change(function(){
//添加所需要執(zhí)行的操作代碼
})
復(fù)制代碼 代碼如下:
<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í)行的操作代碼
})
您可能感興趣的文章:
- jquery操作select詳解(取值,設(shè)置選中)
- jquery實(shí)現(xiàn)動(dòng)態(tài)操作select選中
- jQuery操作select下拉框的text值和value值的方法
- 利用jquery操作select下拉列表框的代碼
- jQuery操作Select的Option上下移動(dòng)及移除添加等等
- jQuery操作Select選擇的Text和Value(獲取/設(shè)置/添加/刪除)
- jquery操作select大全
- jQuery操作select的實(shí)例代碼
- jquery操作select元素和option的實(shí)例代碼
- jquery下拉select控件操作方法分享(jquery操作select)
- jquery操作select常見方法大全【7種情況】
相關(guān)文章
jQuery操作iframe中js函數(shù)的方法小結(jié)
這篇文章主要介紹了jQuery操作iframe中js函數(shù)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery操作iframe中的元素、函數(shù)常用方法與注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
基于jQuery的Tab選項(xiàng)框效果代碼(插件)
依據(jù)className實(shí)現(xiàn)的Tab選項(xiàng)框，支持多個(gè)tab，需要的朋友可以參考下。2011-03-03
本文給大家分享的是使用jQuery制作的模仿百度時(shí)間軸特效的代碼，效果非常不錯(cuò)，有需要的小伙伴可以參考下。2015-07-07
Easyui Datagrid自定義按鈕列(最后面的操作列)
做項(xiàng)目的時(shí)候因?yàn)樾枨?要在表格的最后添加一列操作列,easyUI貌似沒有提供這種功能，下面我們來自定義按鈕列，具體實(shí)現(xiàn)代碼，大家參考下本文吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
jquery對(duì)象和DOM對(duì)象的區(qū)別介紹
jquery對(duì)象和DOM對(duì)象在使用過程很頻繁，正是因?yàn)槿绱?，好多朋友都不知道它們之間有什么區(qū)別，下面為大家詳細(xì)介紹下，希望對(duì)大家有所幫助2013-08-08
Tab頁界面 用jQuery及Ajax技術(shù)實(shí)現(xiàn)(php后臺(tái))
到了B/S開發(fā)時(shí)代，網(wǎng)頁前端布局也把Tab頁的布局形式吸收了過來。特別是和Ajax技術(shù)結(jié)合起來，可以更充分發(fā)揮Tab頁的良好表現(xiàn)力和數(shù)據(jù)緩存的優(yōu)勢(shì)，是一種良好的網(wǎng)頁布局形式2011-10-10
這篇文章主要介紹了jquery獲取及設(shè)置outerhtml的方法,實(shí)例分析了jQuery實(shí)現(xiàn)針對(duì)outerhtml操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)的自定義輪播圖功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義輪播圖功能,結(jié)合實(shí)例形式詳細(xì)分析了輪播圖的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
使用基于jquery的gamequery插件做JS乒乓球游戲
現(xiàn)在jquery比較流行，用js做游戲的也越來越多了，雖然現(xiàn)在html5出來了，但實(shí)際上要用html5做點(diǎn)啥出來還是得靠javascript，所以學(xué)好js是非常重要的2011-07-07