js进阶 9-14 js如何实现下拉列表多选移除
生活随笔
收集整理的這篇文章主要介紹了
js进阶 9-14 js如何实现下拉列表多选移除
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
js進階 9-14 js如何實現下拉列表多選移除
一、總結
一句話總結：
?
1、js如何實現下拉列表多選移除？
把這個下拉列表中的option移除，然后加到另外一個下拉列表（文字）中去。remove方法和add方法
?
2、option的哪個屬性可以獲得文本值？
text屬性
?
3、js傳參的過程中如何傳element？
這種傳參方式真的可以借鑒，onclick="jh(document.form1.sel_2,document.form1.sel_1)"
?
?
二、js進階 9-14? js實現下拉列表多選移除
1、案例說明：下拉列表多選移除
-
案例要點：使用while循環語句，判斷select元素的slectedIndex屬性值不為-1，然后獲取對應的索引值和文本，將其添加到另一個下拉列表中，并在當前select元素將其移出。
?
?
2、相關知識點：Select 下拉列表
Select 對象集合
- options[]返回包含下拉列表中的所有選項的一個數組
Select對象屬性
- length返回下拉列表中的選項數目
- multiple 設置或返回是否選擇多個項目。
- selectedIndex 設置或返回下拉列表中被選項目的索引號。
- size 設置或返回下拉列表中的可見行數。
- id/name/disabled/form/tabIndex
Select 對象方法
- add() 向下拉列表添加一個選項。
語法：selectobject.add(option,before)
- remove() 從下拉列表中刪除一個選項.
語法: selectobject.remove(index)
- blur()/focus()
Option 對象的屬性
- defaultSelected 返回 selected屬性的默認值。
- index 返回下拉列表中某個選項的索引位置。
- Selected 設置或返回 selected 屬性的值。
- text 設置或返回某個選項的純文本值。
- disabled/form/id/value......
?
?
3、截圖和代碼
?
?
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文檔</title> 6 <style> 7 select{ 8 width: 100px; 9 } 10 option{ 11 height: 10px; 12 } 13 </style> 14 </head> 15 <body> 16 <form name="form1" action=""> 17 <select size="6" name="sel_1" multiple=""> 18 <option value='A'>1</option> 19 <option value='B'>2</option> 20 <option value='C'>3</option> 21 <option value='D'>4</option> 22 <option value='E'>5</option> 23 <option value='F'>6</option> 24 </select> 25 <input type="button" value="<<" onclick="jh(document.form1.sel_2,document.form1.sel_1)"> 26 <input type="button" value=">>" onclick="jh(document.form1.sel_1,document.form1.sel_2)"> 27 <select size="6" name="sel_2"></select> 28 </form> 29 <script type="text/javascript"> 30 function jh(s1,s2){ 31 while(s1.selectedIndex!=-1){ 32 var index=s1.selectedIndex; 33 var str1=s1.options[index].text; 34 s1.remove(index) 35 s2.options.add(new Option(str1)) 36 } 37 } 38 </script> 39 </body> 40 </html>?
總結
以上是生活随笔為你收集整理的js进阶 9-14 js如何实现下拉列表多选移除的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 618 京东到家-小程序也狂欢
- 下一篇： 源码篇：Python 实战案例----银