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. 获取选中项的其他值，如有：
<select id="select">
<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>标签选的值的文章就介绍到这了,更多相关JS操作<select>标签选值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序连接服务器展示MQTT数据信息的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
ES6的解构赋值是一种快速方便的方法,可以从数组或对象中提取值并将其赋值给变量,下面这篇文章主要给大家介绍了关于ES6中解构赋值的语法及用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了JS中通过url动态获取图片大小的方法小结，本文给大家列举了两种方法，大家可以尝试下看哪种方法好用，感兴趣的朋友跟随小编一起看看吧2018-10-10
简单说一说对JavaScript原型链的理解,希望对大家学习JavaScript原型链有所帮助，具体内容如下2016-10-10
本文通过一段简单的实例代码给大家介绍微信小程序利用canvas 绘制幸运大转盘，代码很简单，感兴趣的朋友跟随脚本之家小编一起看看吧2018-07-07
这篇文章介绍了js使弹层下面body禁止滚动的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要为大家分享了一款很棒的Bootstrap选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了微信小程序如何实现radio单选框单击打勾和取消,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
JS实现鼠标悬停切换图片,显示天气预报，利用焦点实现选择网站的实例代码，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了一文看懂JSONP原理和应用，对JSONP感兴趣的同学，可以参考下2021-04-04
最新评论