JavaScript 操作 select 下拉列表值与选项详解
本文详解 JavaScript 对 HTML select 标签的操作方法，涵盖获取选中项的索引、value、text 及其他自定义属性。通过综合写法简化代码，并演示如何利用 add() 和 remove() 方法动态向列表中添加或移除选项，附带完整示例源码供参考。
JavaScript 中操作 <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，使用浏览器打开后的效果如下：
使用 JavaScript 操作下拉列表中的选项
<select> 标签下的内容可以通过 JavaScript 进行操作，从而获取其对象，并进一步获取被选项的索引（index）、值（value）以及显示内容（text）。
获取 select 对象的方法如下：
var myselect=document.getElementById("selectID");其中，selectID 表示 <select> 标签的 id 属性值。
2. 获取选中项的索引：
var index =myselect.selectedIndex; //selectedIndex代表的是你所选中项的 index3. 获取选中项 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，使用浏览器打开后的效果如下：
使用 JavaScript 将数组中的元素信息添加到下拉列表
首先介绍将数组的元素信息添加到下拉列表所涉及的方法和属性。
select 标签对象的方法
add()：向下拉列表添加一个选项。
语法：selectobject.add(option, before)
remove()：从下拉列表中删除一个选项。
语法：selectobject.remove(index)
Option 标签对象的属性
defaultSelected：返回 selected 属性的默认值。
index：返回下拉列表中某个选项的索引位置。
Selected：设置或返回 selected 属性的值。
text：设置或返回某个选项的纯文本值。
JavaScript 将数组的元素信息添加到下拉列表的示例源码如下：
<!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> 标签选值内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
JavaScript零基础入门：从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript：void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化：FormData与URLSearchParams用法详解
2026-11-03 23:13:21