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

118 阅读 0 评论 78 点赞

我是靠谱客的博主忧伤鸡，这篇文章主要介绍原生js获取select的option项的label和value值，现在分享给大家，希望可以做个参考。

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>