JS中操作＜select＞标签选的值

JS中操作<select>标签选的值

<select>标签是一种表单控件，用来创建下拉列表。在<select> 标签内可用 <option> 标签定义下拉列表中的可用选项。下面给出一个基本下拉列表示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>基本下拉列表a</title>
</head>
<body><select id="selectID" style="width:100px;height:30px"><option>项1</option><option>项2</option><option>项3</option><option>项4</option></select>
</body>
</html>

保存文件名：简单下拉列表示例a.html，用浏览器打开效果：

JS操作下拉列表中的选项

<select>标签下的内容，可以通过JS的操作，获取其对象，获取被选项的索引（index）、值（value）、内容（text）

获取select对象：

var myselect=document.getElementById("selectID");

其中，selectID标识<select>标签id属性值

2.获取选中项的索引：

var index =myselect.selectedIndex; //selectedIndex代表的是你所选中项的 index

3.获取选中项option的value：

myselect.options[index].value;

上句可去掉options[index].写为myselect.value

4.获取选中项option的text：

myselect.options[index].text;

5. 获取选中项的其他值，如有：

<option value="A" url="http://www.baidu.com">第一个option</option>

<option value="B" url="http://www.qq.com">第二个option</option>

</select>

想获取的url：

myselect.options[index].getAttribute('url');

提示：上面是分步写法，现在看看综合写法

对于上面3的综合写法是：

document.getElementById("selectID").value;

或

document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value;

对于上面4的综合写法是：

document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].text

下面给出从下拉列表中选择图片显示的示例源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>演示</title><style>div{ margin:20px;text-align:center;}</style><script>function show() {document.getElementById("imgID").src = document.getElementById("selectID").value;}</script>
</head>
<body><div > 雪景<select id="selectID" onchange="show()" style="width:100px;height:30px"><option value="./雪1.png">雪1</option><option value="./雪2.png">雪2</option><option value="./雪3.png">雪3</option></select><br><img id="imgID" src="雪1.png" /></div>
</body>
</html>

保存文件名：从下拉列表中选择图片显示1b.html，用浏览器打开效果：

用JS将数组中的元素信息添加到下拉列表

先介绍将数组的元素信息添加到下拉列表用到的方法和属性

select标签对象的方法

add() 向下拉列表添加一个选项。

语法：selectobject.add(option,before)

remove() 从下拉列表中删除一个选项.

语法: selectobject.remove(index)

Optiont标签对象的属性

defaultSelected 返回 selected属性的默认值。

index 返回下拉列表中某个选项的索引位置。

Selected 设置或返回 selected 属性的值。

text 设置或返回某个选项的纯文本值。

JS将数组的的元素信息添加到下拉列表，示例源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title>
</head>
<body><form name="form1" action=""><select name="sel" style="width:100px;height:30px"></select><br><input type="button" value="加载数组的数据项" onclick="addopt()"></form>
<script>var arr=new Array('项1','项2','项3','项4','项5')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)}       }
</script>
</body>
</html>

保存文件名：数组的数据项添加到下拉列表.html，用浏览器打开效果：

JS中操作＜select＞标签选的值相关推荐

select html默认选中的值,HTML/jquery中的select标签设置默认选中取值
一.jQuery中的select标签设置默认选中取值每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如 1.设置value为pxx的项选中 $(" ...
html中select标签默认选择,HTML中的select标签如何设置默认选中的选项
方法有两种. 第一种通过的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 1 option > 2 option > 3 option &g ...
在 Node.js 中操作 Redis
在 Node.js 中操作 Redis Node.js 中可以操作 Redis 的软件包推荐列表:https://redis.io/clients#nodejs. 推荐下面两个: node-redis ...
mvc html.dropdownlist onchange,JS简单操作select和dropdownlist实例
本文实例讲述了JS简单操作select和dropdownlist的方法.分享给大家供大家参考.具体实现方法如下: 一.js选中服务器控件select与dropdownlist 1. js操作服务器控件 ...
uni中使用select标签后生成APP页面跳转空白
uni中使用select标签后生成APP页面跳转空白最近再用webstrom时,写uni APP时发现一个问题当生成apk后,带有select选择器标签的页面突然无法显示一片空白. 报错显示:Ca ...
在Node.js中操作文件系统(一)
在Node.js中操作文件系统在Node.js中,使用fs模块来实现所有有关文件及目录的创建,写入及删除操作.在fs模块中,所有对文件及目录的操作都可以使用同步与异步这两种方法.比如在执行读文件操作 ...
html5下拉列表默认值,element-ui中的select下拉列表设置默认值方法_简单_前端开发者...
element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来那如何修改呢? 上element ...
java中如何设置浏览器宽度_[Java教程]关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)_星空网...
关于JS中获取浏览器高度和宽度值的多种方法(多浏览器) 2017-08-07 0 三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 d ...
在vue.js中实现a标签href tel的打电话功能
在vue.js中实现a标签href tel的打电话功能 div v-for="p in persons"> <p> name: {{ p.name }} < ...

JS中操作＜select＞标签选的值

JS中操作<select>标签选的值

JS中操作＜select＞标签选的值相关推荐

最新文章

热门文章