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() ...
随机推荐
- 第二十八天 月出惊山鸟 —Spring的AOP
6月13日,阴转细雨."人闲桂花落.夜静春山空. 月出惊山鸟.时鸣春涧中." 无论在面向过程还是在面向对象里,奇妙的"纯"字,似乎永远都充满了无限的可能性.除了 ...
- Node组装启动过程
elasticsearch的启动过程是根据配置和环境组装需要的模块并启动的过程.这一过程就是通过guice注入各个功能模块并启动这些模块,从而得到一个功能完整的node.正如之前所说elasticse ...
- sass工具、相关插件
http://koala-app.com/index-zh.html 下载koala 把css文件夹(包含.scss后缀的文件)整个拖进去: 然后在sublime打开.scss文件编译,自动生成css ...
- 原生js大总结十一
101.请简述prototype.__proto__ constructor三者的关系 1.prototype: 每一个函数都有一个prototype这个属性,而这个属性指向一个对象,这个 ...
- Tomcat源代码阅读#1：classloader初始化
Bootstrap 通过Tomcat的启动脚本能够看到启动的入口是在Bootstrap,来看下Bootstrap的main方法, /** * Main method and entry point w ...
- c++ builder firemonkey 实现填充椭圆
相信同类Delphi 类似文章非常多了,这里我用c++ builder firemonkey 实现填充椭圆 本例主要在FormPaint实现,当然你想在Image1->Bitmap->Ca ...
- LoadRunner--HTML与URL录制方式区别
Recording录制选项 这里提供了两个大类的录制方式: 1. HTML-based script基于HTML的脚本 这种方式录制出来的脚本是基于HTML基础的,为每个用户操作生成单独的步骤,这种脚 ...
- Java Lock Example – ReentrantLock（java锁的例子）
Welcome to Java Lock example tutorial. Usually when working with multi-threaded environment, we use ...
- C#复习题
1．以下(D )不是 C#中方法的參数的类型. A．值类型B．引用型C．输出型D．属性 2．C#中的数据类型分为值类型和引用类型,以下(B )不属于引用类型. A．类 B．枚举 C．接口 D．数组 3 ...
- C语言深度剖析-----指针数组和数组指针的分析
指针数组和数组指针的分析 数组类型 定义数组类型 数组指针 这个不可能为数组指针,指向数组首元素 例 指针数组 例 main函数的参数 例 小结