<acronym id="caeec"></acronym>

使用JavaScript獲取下拉框的value值

更新時間：2022-09-09 09:44:26 來源：動力節點瀏覽1473次

大家在Java在線學習技術文檔中會學到很多知識，在本文中，我們將學習在 Javascript 中獲取下拉列表中的選定值。我們可以使用 2 種方法獲取值：

1.通過使用 value 屬性

2.通過將 selectedIndex 屬性與 option 屬性一起使用

我們將通過示例了解這兩種方法。

方法 1：使用value 屬性：

可以使用定義列表的選定元素上的 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>

輸出：

方法 2：將selectedIndex 屬性與option 屬性一起使用：

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>

輸出：