关于JS获取select值的两种实现方法
时间: 2024-02-06 16:11:45 浏览: 36
好的,关于JS获取select值的两种实现方法,以下是详细解答:
方法1:使用 select 对象的 selectedIndex 属性
在 HTML 中,我们可以通过 select 元素定义一个下拉列表:
```
<select id="mySelect">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
```
在 JavaScript 中,我们可以使用 select 对象的 selectedIndex 属性来获取选中项的索引,然后再通过 options 对象获取选中项的值:
```
var select = document.getElementById("mySelect");
var index = select.selectedIndex;
var value = select.options[index].value;
```
方法2:使用 select 对象的 value 属性
除了 selectedIndex 属性,select 对象还有一个 value 属性,可以直接获取选中项的值。使用这种方法,我们不需要先获取选中项的索引,直接通过 value 属性获取选中项的值即可:
```
var select = document.getElementById("mySelect");
var value = select.value;
```
注意:以上两种方法适用于单选下拉列表,如果是多选下拉列表,则需要使用循环来获取每个选中项的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)