js进阶 9-12 如何将数组的信息添加到下拉列表
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 如何将数组的信息添加到下拉列表的更多相关文章
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶 10-11/12 表单伪类选择器的作用
js进阶 10-11 表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- 前端进阶（12） - css 的弱化与 js 的强化
css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...
- js进阶正则表达式5几个小实例（原样匹配的字符在正则中原样输出）（取反^）
js进阶正则表达式5几个小实例(原样匹配的字符在正则中原样输出)(取反^) 一.总结 原样匹配的字符在正则中原样输出:var reg4=/第[1-2][0-9]章/g //10-29 取反^:var ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- JS 学习笔记--5---对象和数组
1.Object类型(引用类型) 不具备多少功能,但是对于在ECMAScript中存储和传递数据确实,确是很理想的选择. 创建方式:(1).使用new Object();方式创建对象,然后对对象进行设 ...
- web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...
- js去除空格12种方法
注:本文非本人原著:原文作者: 黄卉 <js去除空格12种方法> //JS去除空格的方法目前共有12种: //实现1 String.prototype.trim = function() ...
随机推荐
- 用电脑从Google Play下载apk
用电脑从Google Play下载apk 方法一:给Chrome浏览器安装apk-downloader插件,需禁止 SSL 错误警告,即在Chrome的快捷方式上加入"--ignore-ce ...
- 7. Spring Boot 启动加载数据 CommandLineRunner
转自:https://blog.csdn.net/catoop/article/details/50501710
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第二篇：第一个页面
摘要 本文首先一步一步完成Demo的第一个页面——首页.然后根据实现过程,说明一下其中用到的与ASP.NET MVC相关的概念与原理. 让第一个页面跑起来 现在,我们来实现公告系统 ...
- 软件——机器学习与Python，Python3的输出与输入
输出 用print()在括号中加上字符串,就可以向屏幕上输出指定的文字.比如输出'hello, world',用代码实现如下: >>> print('hello, world') p ...
- Jpa 的Persistence.xml配置讲解
<?xml version="1.0"?> <persistence xmlns="http://java.sun.com/xml/ns/persist ...
- 洛谷 P1157 组合的输出
P1157 组合的输出 题目描述 排列与组合是常用的数学方法,其中组合就是从n个元素中抽出r个元素(不分顺序且r<＝n),我们可以简单地将n个元素理解为自然数1,2,…,n,从中任取r个数. 现 ...
- sass和less，优秀的前端样式预处理器
身为切图界的一员,或者说在前端界打滚了一段日子的你.会慢慢地发现.如今的css编写已经不能满足自己的效率. 假设有更强大的框架,让你的css更灵活和更easy复用和维护,那该多好啊.非常明显,这个早已 ...
- Dynamics CRM2016 Web API之Expand related entities & $ref & $count
本篇介绍两个关于1:N关系中通过主实体取关联子实体的api,这两个api会常常被用到并且比原来的odata方式更加方便.之前假设我们要取主实体下全部的关联实体的记录都是通过Retrieve Multi ...
- SQl 事务增加数据
连SQl简单地事务处理多表的情况 begin transaction declare @error int declare @QID int set @error = 0 insert into HW ...
- Linux常用命令及解析
基本日常命令 init 3 (进入命令行页面) steup (设置网络) exit (退出用户) pwd(查看当前所在目录) date(查看当前系统时间) 举例:(date +%Y-%m-%d)以年月 ...