JavaScript實(shí)現(xiàn)向select下拉框中添加和刪除元素的方法
本文實(shí)例講述了JavaScript實(shí)現(xiàn)向select下拉框中添加和刪除元素的方法。分享給大家供大家參考,具體如下:
1、說(shuō)明
a. 利用append()
方法向下拉框中添加元素
b. 利用remove()
方法移除下拉框中最后一個(gè)元素
2、實(shí)例源碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript向select下拉框中添加和刪除元素</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> /** * 向select下拉框中添加子元素 */ function addElement() { //保證不重復(fù)添加 $("#select_div").empty(); //添加子元素 $("#select_div").append("<option value='0'>---請(qǐng)選擇---</option><option value='1'>男</option><option value='2'>女</option>"); } /** * 刪除下拉框中最后一個(gè)元素 */ function removeLast() { //刪除最后一個(gè)子元素 $("#select_div option:last").remove(); } </script> </head> <body> </body> <div id="select_span"> <select id="select_div" style="width:145px;"> </select> </div> <input type="button" value="添加元素" onclick="addElement()"/> <input type="button" value="刪除元素" onclick="removeLast()"/> </html>
3、實(shí)現(xiàn)結(jié)果
(1)初始化時(shí)
(2)添加元素
(3)刪除元素
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery表單(form)操作技巧總結(jié)》、《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- JavaScript數(shù)組,JSON對(duì)象實(shí)現(xiàn)動(dòng)態(tài)添加、修改、刪除功能示例
- JS點(diǎn)擊動(dòng)態(tài)添加標(biāo)簽、刪除指定標(biāo)簽的代碼
- vue.js實(shí)現(xiàn)點(diǎn)擊后動(dòng)態(tài)添加class及刪除同級(jí)class的實(shí)現(xiàn)代碼
- 原生js封裝添加class,刪除class的實(shí)例
- javascript cookie的基本操作(添加和刪除)
- js實(shí)現(xiàn)添加刪除表格(兩種方法)
- 詳解原生JS動(dòng)態(tài)添加和刪除類
相關(guān)文章
使用jquery組件qrcode生成二維碼及應(yīng)用指南
這篇文章主要介紹了使用jquery組件qrcode生成二維碼及應(yīng)用指南,非常全面實(shí)用,需要的朋友可以參考下2015-02-02jQuery插件kinMaxShow擴(kuò)展效果用法實(shí)例
這篇文章主要介紹了jQuery插件kinMaxShow擴(kuò)展效果用法,實(shí)例分析了kinMaxShow擴(kuò)展的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05JQuery中$.ajax()方法參數(shù)詳解及應(yīng)用
JQuery中$.ajax()方法想必大家并不陌生吧,在本文將為大家介紹下其參數(shù)及應(yīng)用示例,感興趣的朋友不要錯(cuò)過(guò)2013-12-12jQuery實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查功能,涉及jQuery針對(duì)網(wǎng)頁(yè)DOM節(jié)點(diǎn)的獲取、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09jQuery 2.0.3 源碼分析之core(一)整體架構(gòu)
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core(一)整體架構(gòu),需要的朋友可以參考下2014-05-05Jquery工作常用實(shí)例 使用AJAX使網(wǎng)頁(yè)進(jìn)行異步更新
AJAX 通過(guò)在后臺(tái)與服務(wù)器交換少量數(shù)據(jù)的方式,允許網(wǎng)頁(yè)進(jìn)行異步更新。這意味著有可能在不重載整個(gè)頁(yè)面的情況下,對(duì)網(wǎng)頁(yè)的一部分進(jìn)行更新。2011-07-07手寫(xiě)簡(jiǎn)單的jQuery雪花飄落效果實(shí)例
這篇文章主要給大家介紹了關(guān)于手寫(xiě)簡(jiǎn)單的jQuery雪花飄落的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04jquery觸發(fā)a標(biāo)簽跳轉(zhuǎn)事件示例代碼
本文為大家詳細(xì)介紹下如何使用jquery觸發(fā)a標(biāo)簽的跳轉(zhuǎn)事件,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07jQuery選擇器中含有空格的使用示例及注意事項(xiàng)
選擇器中的空格是不容忽視的,多一個(gè)空格或少一個(gè)空格也許得到的結(jié)果會(huì)截然不同的,下面以一個(gè)示例為大家詳細(xì)介紹下到底有什么不同,感興趣的朋友額可以參考下2013-08-08