原生js获取select的option项的label和value值

最新推荐文章于 2025-03-21 10:00:00 发布

spring-boot

最新推荐文章于 2025-03-21 10:00:00 发布

阅读量6.6k

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/wdhouyigege/article/details/75095259

版权

js 专栏收录该内容

15 篇文章

订阅专栏

本文展示了如何使用原生JavaScript获取select元素中选中option的label和value值。通过获取select的selectedIndex，然后从options数组中提取对应的text和value，最后将这些值绑定到两个不可编辑的文本框上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.利用原生js获取select选中option项的值和文本

2.将select的选中值和文本绑定到了两个文本框上

源码:

<!DOCTYPE html>
<html>
<head>
<title>select的取值</title>
</head>
<body>
<div>
国家
<select id="country" οnchange="getVal()">
<option selected="selected" value="China">中国</option>
<option value="Canada">加拿大</option>
<option value="India">印度</option>
</select>
label:<input type="text" id="myLabel" readonly="readonly" />
value:<input type="text" id="myValue" readonly="readonly"/><br>
</div>
</body>
</html>
<script type="text/javascript">
//给label和value设置初值
window.onload = getVal();
//select的onchange调用函数
function getVal(){
var countrySelect = document.getElementById('country');//获取select的dom
var index = countrySelect.selectedIndex;//获取选中的index
var label = countrySelect.options[index].text; //获取标签值
var value = countrySelect.options[index].value;//获取value值
document.getElementById('myLabel').value = label;
document.getElementById('myValue').value = value;
}
</script>