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() ...
随机推荐
- ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事？
原网址:http://huangxuan.me/2015/09/22/js-version/ JavaScript 有着很奇怪的命名史. 1995 年,它作为网景浏览器(Netscape Naviga ...
- opencv cvPreCornerDetect
关于OpenCv中cvPreCornerDetect 运行出错解决方法 http://m.blog.csdn.net/blog/wode0239 由于书本上示例的不全,相信大家在做的时候,肯定是无从下 ...
- ArcGIS在线帮助的使用指南
一直感觉ArcGIS的在线帮助就是鸡肋,没想到网络常见的所谓的高大上的博文,也不过是对GIS 在线帮助的拷贝,或者简单修改而已.其实ArcGIS的在线帮助包含了以下几个很好用的模块: 备注 ArcGI ...
- Android通过startService播放背景音乐简单演示样例
关于startService的基本使用概述及其生命周期可參见博客<Android中startService的使用及Service生命周期>. 本文通过播放背景音乐的简单演示样例,演示sta ...
- jquery 获取上一个兄弟元素和下一个兄弟元素
jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQu ...
- LA 3989 - Ladies' Choice 稳定婚姻问题
https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...
- 写PPT的先扬后抑的思路
近期给一个客户做IT战略规划. 基本结束了,客户要求写点有高度的东西.我想也是,尽管眼下的PPT也触及到战略和行业的问题,可是没有总结出来.于是就挖空心思,琢磨了三天.写了4页PPT.改动了几遍.还算 ...
- kafka集群操作指南
目录 kafka集群操作指南 (一)单机版安装 (二)集群安装 (三)集群启停操作 (四)topic相关的操作 (五)某个broker挂掉,本机器可重启 (六)某个broker挂掉且无法重启,需要其它 ...
- Qt浅谈之一：内存泄露（总结），对于QWidget可以setAttribute(Qt::WA_DeleteOnClose)，而且绝对不能手动删除栈上的对象
一.简介 Qt内存管理机制:Qt 在内部能够维护对象的层次结构.对于可视元素,这种层次结构就是子组件与父组件的关系:对于非可视元素,则是一个对象与另一个对象的从属关系.在 Qt 中,在 Qt 中,删除 ...
- 3、Pycharm使用
1.设置文件模板 file->settings->Editor->File and Code Templates->Python Script 2.运行 a.点击要运行的文件, ...