JavaScript獲取select選中值的兩種方法實現
更新時間：2025年04月29日 09:52:36 作者：但老師
在Web開發(fā)中,獲取<select>元素的選中值是表單處理的常見需求,本文主要介紹了JavaScript獲取select選中值的兩種方法實現,具有一定的參考價值,感興趣的可以了解一下
在Web開發(fā)中，獲取<select>元素的選中值是表單處理的常見需求。
1. 直接獲取value屬性
const select = document.getElementById('mySelect');
console.log('選中值:', select.value); // 返回選中項的value或text
所有瀏覽器都支持直接讀取<select>元素的value屬性：
- 若
<option>設置了value屬性，返回value值 - 若未設置
value屬性，返回選項的文本內容 - 多選模式則返回第一個選中項
案例
<select id="fruit"> <option>蘋果</option> <!-- 未設置value --> <option value="banana">香蕉</option> </select>
console.log(select.value); // "蘋果"（text內容） console.log(select.value); // "banana"（value內容）
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> <!-- 未設置value --> <option value="banana">香蕉</option> </select>
console.log(select.options[0].value); // ""（空value） console.log(select.options[1].value); // "banana"
到此這篇關于JavaScript獲取select選中值的兩種方法實現的文章就介紹到這了,更多相關JavaScript獲取select選中值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了javaScript中slice函數用法,較為詳細的分析了javascript中slice函數的功能、定義及使用方法,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JS獲取本地地址及天氣的方法,結合實例形式總結分析了javascript通過瀏覽器、第三方API實現獲取本地地址與天氣的相關操作技巧,需要的朋友可以參考下2019-05-05
下面小編就為大家?guī)硪黄钊肜斫鈐s數組的sort排序。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
js技巧--轉義符"\"的妙用...2007-01-01
JavaScript繼承方式實例，需要的朋友可以參考下。2010-10-10
本文介紹了JavaScript中常量的定義與使用場景,闡述了基本和引用數據類型及其轉換方式,重點講解了隱式與顯式類型轉換的規(guī)則和方法,感興趣的朋友跟隨小編一起看看吧2025-10-10
JavaScript面向對象程序設計創(chuàng)建對象的方法分析
這篇文章主要介紹了JavaScript面向對象程序設計創(chuàng)建對象的方法,結合實例形式分析了javascript使用object構造函數和對象字面量來創(chuàng)建對象的相關操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了二叉樹先序遍歷的非遞歸算法，有需要的朋友可以參考一下2014-01-01
這篇文章主要為大家詳細介紹了JS實現簡單圖片輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
Javascript實現快速排序（Quicksort）的算法詳解
排序算法（Sorting algorithm）是計算機科學最古老、最基本的課題之一，要想成為合格的程序員，就必須理解和掌握各種排序算法。2015-09-09