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. actionbar-displayOptions 属性分析

    displayOptions 这个属性主要是控制这actionbar 上返回按钮.标题等的显示.它作为 actionBarStyle 的一个item,如下 <style name="A ...

  2. String.Empty,NULL和""的区别

    String.Empty,NULL和""的区别 string.Empty就相当于"" 一般用于字符串的初始化 比如: string a; Console.Wri ...

  3. localStorage存储数据位置

    chrome浏览器:C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage 中,虽然后缀名是.loc ...

  4. Dcloud课程2 什么是Dcloud

    Dcloud课程2  什么是Dcloud 一.总结 一句话总结:DCloud提供了一套快速开发应用的跨平台技术方案. 1.DCloud的产品架构? MUI+(H5+)+HBuilder 2.什么是MU ...

  5. RMAN异机复制数据库(不同路径)

    1.恢复参数文件 设置环境变量: export ORACLE_SID=hncdfhq 登录RMAN: rman target / 在RMAN里把数据库起到nomount状态: startup nomo ...

  6. P2P平台很赚钱么?

    最近几年,搞P2P网贷和财富投资相关的金融周边公司,多了很多,楼下门店和电梯里的贷款小广告,真是多啊. 大家都去搞一件事的时候,很可能是大家都觉得这件事有利可图.但事实是,赚钱的总是少数,看到别人搞的 ...

  7. System.Text.Encoding.Default

    string strTmp = "abcdefg某某某";int i= System.Text.Encoding.Default.GetBytes(strTmp).Length;/ ...

  8. RMQ问题-ST方法

    参考 http://blog.csdn.net/sdj222555/article/details/7875575 RMQ 就是 Range Minimum/Maximum Query 就是求区间最值 ...

  9. nokia 5220 XpressMusic 自己刷机

    看了半天各种论坛,是在不知道从哪里下手,所以自己写一篇自己刷机的新的.凤凰那个软件好像已经挂了,每次打开就是service is not authorized. 所以还是使用nokia自己的官方下载平 ...

  10. 【Struts2三】拦截器

    拦截器:就是在訪问action之前.对其进行拦截!能够在拦截器中做一些逻辑的处理! 比方权限验证.没有权限就不给予訪问! 拦截器等效于servlet中的过滤器! 使用拦截器步骤: 1.定义自己的拦截器 ...