溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“如何使用JavaScript獲取下拉框的value值”，內容詳細，步驟清晰，細節處理妥當，希望這篇“如何使用JavaScript獲取下拉框的value值”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
我們可以使用 2 種方法獲取值：
1.通過使用 value 屬性
2.通過將 selectedIndex 屬性與 option 屬性一起使用
我們將通過示例了解這兩種方法。
可以使用定義列表的選定元素上的 value 屬性找到選定元素的值。此屬性返回一個字符串，表示列表中<option>元素的 value 屬性。如果未選擇任何選項，則不會返回任何內容。
句法：
選擇元素值
示例：此示例描述了可以為選定元素找到的 value 屬性。
<!DOCTYPE html><head>
<title>
How to get selected value in
dropdown list using JavaScript? </title></head><body>
<h1 style="color: green">
GeeksforGeeks </h1>
<b>
How to get selected value in dropdown
list using JavaScript? </b> <p> Select one from the given options: <select id="select1">
<option value="free">Free</option>
<option value="basic">Basic</option>
<option value="premium">Premium</option>
</select>
</p> <p> The value of the option selected is: <span class="output"></span>
</p>
<button onclick="getOption()"> Check option </button>
<script type="text/javascript">
function getOption() {
selectElement = document.querySelector('#select1');
output = selectElement.value; document.querySelector('.output').textContent = output;
} </script></body></html>selectedIndex 屬性返回下拉列表中當前選定元素的索引。此索引從 0 開始，如果未選擇任何選項，則返回 -1。options 屬性返回<select> 下拉列表中所有選項元素的集合。元素根據頁面的源代碼進行排序。在它之前找到的索引可以和這個屬性一起使用來獲取被選中的元素。可以使用 value 屬性找到此選項的值。
句法：
selectElement.options[selectElement.selectedIndex].value
適當的價值：
selectedIndex：用于設置或獲取集合中選中的<option>元素的索引。
length：它是只讀屬性，用于獲取集合中<option>元素的數量。
返回值：通過指定<select>元素中的所有<option>元素返回 HTMLOptionsCollection 對象。該元素將在集合中排序
示例：此示例描述了 selectedIndex 屬性和 option 屬性。
<!DOCTYPE html><head>
<title>
How to get selected value in
dropdown list using JavaScript? </title></head><body>
<h1 style="color: green">
GeeksforGeeks </h1>
<b>
How to get selected value in
dropdown list using JavaScript? </b> <p> Select one from the given options: <select id="select1">
<option value="free">Free</option>
<option value="basic">Basic</option>
<option value="premium">Premium</option>
</select>
</p> <p> The value of the option selected is: <span class="output"></span>
</p>
<button onclick="getOption()">Check option</button>
<script type="text/javascript">
function getOption() {
selectElement = document.querySelector('#select1');
output = selectElement.options[selectElement.selectedIndex].value; document.querySelector('.output').textContent = output;
} </script></body></html>讀到這里，這篇“如何使用JavaScript獲取下拉框的value值”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
