利用js获取下拉框中所选的值

获取下拉框中所选的值是很常见的前端开发需求。可以使用Javascript来轻松实现这一功能。下面提供几种获取下拉框值的方法供大家参考。

通过select元素的selectedIndex属性获取值

select元素有一个selectedIndex属性，可以返回当前选中项在集合中的索引位置。

示例1：

<select id="mySelect">
    <option value="0">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
</select>
<button onclick="myFunction()">获取所选值</button>
<script>
function myFunction() {
  var x = document.getElementById("mySelect").selectedIndex;
  console.log(document.getElementsByTagName("option")[x].value);
}
</script>

通过select元素的value属性获取值

另外，select元素还有一个value属性，可以直接获取选中串行的值。

示例2：

<select id="mySelect">
    <option value="0">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
</select>
<button onclick="myFunction()">获取所选值</button>
<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  console.log(x);
}
</script>

以上两种方法都可以轻松获取select元素中的选中值，根据具体场景选择使用哪种方法即可。