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

一、总结

一句话总结：创建出select的option，然后selectElement的add方法加进 selectElement 即可

1、创建出select的option的两种方法：

new option() 和 createElement('option')

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

1、案例说明：数组数据添加到下拉列表

  • 使用二维数组和下拉菜单相结合，实现多级联动菜单

  • 使用createElement的方法

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>

 </head>

 <body>

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

         <select name="sel" size="3">

         </select><br>

         <input type="button" value="测试按钮" onclick="addopt()">

     </form>

 <script>

 var arr=new Array('数组元素1','数组元素2','数组元素3','数组元素4')

 var counts=arr.length;

     function addopt(){

         for(var i=0;i<counts;i++){

             // document.form1.sel.options[i]=new Option (arr[i],i)

             var opt=document.createElement('option')

             opt.text=arr[i]

             opt.value=i;

             document.form1.sel.add(opt,undefined)

         }

         var opt2=document.createElement('option')

             opt2.text='opt2'

             document.form1.sel.add(opt2,1)

     }

 </script>

 </body>

 </html>

js进阶 9-12 如何将数组的信息添加到下拉列表的更多相关文章

  1. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  2. js进阶 10-11/12 表单伪类选择器的作用

    js进阶 10-11  表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...

  3. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  4. 前端进阶（12） - css 的弱化与 js 的强化

    css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...

  5. js进阶正则表达式5几个小实例（原样匹配的字符在正则中原样输出）（取反^）

    js进阶正则表达式5几个小实例(原样匹配的字符在正则中原样输出)(取反^) 一.总结 原样匹配的字符在正则中原样输出:var reg4=/第[1-2][0-9]章/g //10-29 取反^:var ...

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

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

  7. JS 学习笔记--5---对象和数组

    1.Object类型(引用类型) 不具备多少功能,但是对于在ECMAScript中存储和传递数据确实,确是很理想的选择. 创建方式:(1).使用new Object();方式创建对象,然后对对象进行设 ...

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

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

  9. js去除空格12种方法

    注:本文非本人原著:原文作者: 黄卉  <js去除空格12种方法> //JS去除空格的方法目前共有12种: //实现1 String.prototype.trim = function() ...

随机推荐

  1. python-string中部分string替换

    今天遇到一个问题,就是需要把 “/home/zhangshuli/32_kk/” 中的32_kk 替换成为 52_kk 然后就在网上找方法,刚开始尝试的方法是 aaa = "/home/zh ...

  2. RocketMQ集群消费的那些事

    说明 RocketMQ集群消费的时候,我们经常看到类似注释里面 (1,(2 的写法,已经有时候有同学没注意抛异常的情况就是(3 模拟的情况.那么这3种情况到底是怎么样的呢?你是否都了然于心呢?下面我们 ...

  3. 1.JPA概要

    转自:https://www.cnblogs.com/holbrook/archive/2012/12/30/2839842.html JPA定义了Java ORM及实体操作API的标准.本文摘录了J ...

  4. HTML基础第十一讲---背景标志

    转自:https://i.cnblogs.com/posts?categoryid=1121494 您是否老觉得网页「空空的」,没错!一个可能是我们还没有很多内容,另一个可能则是我们还没有设定网页背景 ...

  5. ThinkPHP5.0---URL访问

    ThinkPHP 5.0 在没有启用路由的情况下典型的URL访问规则是(采用 PATH_INFO 访问地址): http://serverName/index.php(或者其它应用入口文件)/模块/控 ...

  6. 启动Tomcat，startup.bat一闪而过的解决办法

    1.打开命令行:win+R --> cmd2.将解压后的tomcat\bin\startup.bat文件拖到控制台窗口中,回车. 这样就可以看到错误信息的提示,根据提示修改即可.

  7. Linux 内核源代码分析 chap 2 存储管理 （5）

    物理页面分配 linux 内核 2.4 中有 2 个版本号的物理页面分配函数 alloc_pages(). 一个在 mm/numa.c 中, 还有一个在 mm/page_alloc.c 中, 依据条件 ...

  8. 1、opencv3.3.0和cmake安装步骤(按照以下步骤安装后仅能在PC上运行，动态库也是PC端的属性)

    1.下载安装CMake for Linux 下载地址:https://cmake.org/download/ 我下载的版本是,下载文件cmake-3.11.1.tar.gz ./bootstrap m ...

  9. 【a903】石子归并

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 在一个圆形操场的四周摆放着N堆石子(N<= 100),现要将石子有次序地合并成一堆.规定每次只能选取相 ...

  10. jquery如何实现动态增加选择框

    jquery如何实现动态增加选择框 一.总结 一句话总结:用jquery的clone(true)方法. 1.如何在页面中复制amazeui加了特效的标签? amazeui中的控件带js方法,不知道那部 ...