js 获取select key 和 value
时间: 2023-09-24 14:10:50 浏览: 51
可以使用 JavaScript 中的 `selectedIndex` 属性和 `options` 属性来获取 select 元素中选定选项的索引和对应的值。
例如,假设我们有一个下拉列表框(select 元素):
```html
<select id="mySelect">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
```
我们可以使用以下代码来获取选定选项的索引和对应的值:
```javascript
// 获取 select 元素
const selectEl = document.getElementById("mySelect");
// 获取选定选项的索引
const selectedIndex = selectEl.selectedIndex;
// 获取选定选项的值
const selectedValue = selectEl.options[selectedIndex].value;
console.log("选定选项的索引:", selectedIndex);
console.log("选定选项的值:", selectedValue);
```
注意,`selectedIndex` 属性返回的是选项的索引,而不是选项的值。要获取选项的值,需要使用 `options[selectedIndex].value`。如果您需要获取选项的文本内容,可以使用 `options[selectedIndex].text`。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)