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如何实现下拉列表多选移除相关推荐

js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）
js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...
js进阶 11-22/23 js如何实现选项卡
js进阶 11-22/23 js如何实现选项卡一.总结一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...
JS进阶篇--ckplayer.js视频播放插件
网页中常见的功能就是播放视频,下面介绍的这个ckplayer.js既可以在pc端播放,也可以在手机网页上播放. 可调用flash也可以调用html5播放器: <div id="a1&q ...
web前端开发分享js进阶篇
js进阶篇: js进阶,等妙味看的差不多,心里难免痒痒,看老师用尽可能少的代码来实现了众多以前没法实现的动态效果.然后自己想写,但不知道写啥东西,下面就这个问题做以建议,写这些东西的目的有这么几个,一 ...
2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
cytoscape.js进阶篇
cytoscape.js进阶篇系列文章前言 cytoscape依赖引用 cytoscape扩展依赖引用升级Cytoscape组件扩展Cytoscape组件模板容器扩展Cytoscape组件方 ...
js转义字符 php 反转义6,js进阶正则表达式6转义字符（加\转义）（.符号）（|符号）...
js进阶正则表达式6转义字符(加\转义)(.符号)(|符号) 一.总结转义字符:{} () / $ # & * . ....... //3.特殊字符,都要加转义\ 点符号:var reg2= ...
js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素一.总结一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...
js进阶 12-5 jquery中表单事件如何使用
js进阶 12-5 jquery中表单事件如何使用一.总结一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样. 1.表单获取焦点和失去焦点事件有哪两组? 注意是 ...

js进阶 9-14 js如何实现下拉列表多选移除

js进阶 9-14 js如何实现下拉列表多选移除

一、总结

一句话总结：

1、js如何实现下拉列表多选移除？

2、option的哪个属性可以获得文本值？

3、js传参的过程中如何传element？

二、js进阶 9-14 js实现下拉列表多选移除

1、案例说明：下拉列表多选移除

2、相关知识点：Select 下拉列表

Select 对象集合

Select对象属性

Select 对象方法

Option 对象的属性

3、截图和代码

js进阶 9-14 js如何实现下拉列表多选移除相关推荐

最新文章

热门文章