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、截图和代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <style>

     select{

             width: 100px;

         }

         option{

             height: 10px;

         }

     </style>

 </head>

 <body>

     <form name="form1" action="">

         <select size="6" name="sel_1" multiple="">

             <option value='A'>1</option>

             <option value='B'>2</option>

             <option value='C'>3</option>

             <option value='D'>4</option>

             <option value='E'>5</option>

             <option value='F'>6</option>

         </select>

         <input type="button" value="<<" onclick="jh(document.form1.sel_2,document.form1.sel_1)">

         <input type="button" value=">>" onclick="jh(document.form1.sel_1,document.form1.sel_2)">

         <select size="6" name="sel_2"></select>

     </form>

     <script type="text/javascript">

         function jh(s1,s2){

             while(s1.selectedIndex!=-1){

                 var index=s1.selectedIndex;

                 var str1=s1.options[index].text;

                 s1.remove(index)

                 s2.options.add(new Option(str1))

             }

         }

     </script>

 </body>

 </html>
 

js进阶 9-14 js如何实现下拉列表多选移除的更多相关文章

  1. js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）

    js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...

  2. js进阶 9-10 html中如何遍历下拉列表

    js进阶 9-10  html中单选框和多选框如何遍历下拉列表 一.总结 一句话总结: 1.select元素的options.length可以获取选择长度,然后用options[i]精确定位到选项,用 ...

  3. js进阶 11-22/23 js如何实现选项卡

    js进阶 11-22/23 js如何实现选项卡 一.总结 一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...

  4. js进阶 9 js操作表单知识点总结

    js进阶 9 js操作表单知识点总结 一.总结 一句话总结:熟记较常用的知识点,对于一些不太常用的知识点可以在使用的时候查阅相关资料,在使用和练习中去记忆. 1.表单中学到的元素的两个对象集合石什么? ...

  5. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  6. js进阶 14 jquery的ajax有哪些函数和事件（多练）

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  7. js进阶 9-12 如何将数组的信息添加到下拉列表

    js进阶 9-12 如何将数组的信息添加到下拉列表 一.总结 一句话总结:创建出select的option,然后selectElement的add方法加进 selectElement 即可 1.创建出 ...

  8. js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  9. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

随机推荐

  1. 前端面试题（HTML/CSS）

    (前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...

  2. v-for实现循环嵌套

    <!DOCTYPE html> <html lang="en"> <head> <title></title> < ...

  3. [读书笔记]Java类载入过程

    一. 类的生命周期 类从被载入到虚拟机内存中開始,到卸载出内存为止,有下面(如图)的生命周期: 以上"载入->验证->准备->解析->初始化"称为类的载入过 ...

  4. 浩爷AC自己主动机高速学习方案

        今天弄完自己主动机之后.从那天比赛的阴影中爬出来了,猛地一看真不咋滴难,细致一看这尼玛还不如猛的一看. ..     必备算法:KMP,字典树(KMP我写了,字典树太简单,就是一个思想.我能够 ...

  5. 【万里征程——Windows App开发】DatePickerFlyout、TimePickerFlyout的使用

    已经有挺长时间没有更新这个专栏了,只是刚才有网友私信问我一个问题如今就火速更新上一篇~ 这一篇解说在WP上DataPickerFlyout和TimePickerFlyout的使用.但它们仅仅能在WP上 ...

  6. （转）Windows Server 2012 R2虚拟机自激活（AVMA）技术

    转自: 老丁的技术博客 相信Hyper-v管理员都有这样的经历,安装多台虚拟机后,都要一台一台手工激活,如果虚拟机足够多的话,这是一项很繁琐的工作,但从Windows Server 2012 R2开始 ...

  7. 定制表格头, 学习Core Graphic 的第二部分, 阴影与玻璃效果.

    //定制表格头, 学习Core Graphic 的第二部分, 阴影与玻璃效果. https://github.com/comcuter/testsnippets/commit/e96f62d115ef ...

  8. C API函数描写叙述(S-W)

    25.2.3.59. mysql_select_db() int mysql_select_db(MYSQL *mysql, const char *db) 描写叙述 使由db指定的数据库成为由mys ...

  9. php实现记忆化递归--以斐波那契数列为例（还是以边学边做为主，注重练习）

    php实现记忆化递归--以斐波那契数列为例(还是以边学边做为主,注重练习) 一.总结 1.递归不优化的话,30层开外就有点吃力了 2.php因为定义变量的时候不用定义变量类型,所以数组里面的类型也是p ...

  10. HINTERNET应包含的头文件

    #include <afxinet.h> DWORD status=0;DWORD dwLen=sizeof(DWORD); if(!HttpQueryInfo(hRequest,HTTP ...