欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript獲取select選中值的兩種方法實現(xiàn)

 更新時間：2025年04月29日 09:52:36   作者：但老師  
在Web開發(fā)中,獲取<select>元素的選中值是表單處理的常見需求,本文主要介紹了JavaScript獲取select選中值的兩種方法實現(xiàn),具有一定的參考價值,感興趣的可以了解一下

在Web開發(fā)中，獲取<select>元素的選中值是表單處理的常見需求。

1. 直接獲取value屬性

const select = document.getElementById('mySelect');
console.log('選中值:', select.value);  // 返回選中項的value或text

所有瀏覽器都支持直接讀取<select>元素的value屬性：

  • 若<option>設(shè)置了value屬性，返回value值
  • 若未設(shè)置value屬性，返回選項的文本內(nèi)容
  • 多選模式則返回第一個選中項

案例

<select id="fruit">
  <option>蘋果</option>          <!-- 未設(shè)置value -->
  <option value="banana">香蕉</option>
</select>

console.log(select.value);       // "蘋果"（text內(nèi)容）
console.log(select.value);       // "banana"（value內(nèi)容）

2. 通過selectedIndex遍歷選項

const select = document.getElementById('mySelect');
const index = select.selectedIndex;     // 獲取選中項索引
const value = select.options[index].value;  // 通過options集合獲取值

通過selectedIndex獲取當前選中項的索引（從0開始）, 再通過options集合訪問具體選項對象, 然后讀取選項的value或text屬性

案例

<select id="fruit">
  <option>蘋果</option>          <!-- 未設(shè)置value -->
  <option value="banana">香蕉</option>
</select>

console.log(select.options[0].value); // ""（空value） 
console.log(select.options[1].value); // "banana"

 到此這篇關(guān)于JavaScript獲取select選中值的兩種方法實現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript獲取select選中值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論