資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何查詢HTML select標籤中所有選中的選項？
概述
要從下拉框中獲取選定的選項，我們將使用JavaScript庫jQuery。jQuery提供了一種功能，可以用最少的程式碼行來選擇和查詢選項。為此，我們將對單選和多選使用偽類選擇器“:selected”。因此，對於單選，我們將直接提醒使用者；對於多選，我們將把輸出儲存在陣列中，然後顯示在螢幕上。
語法
此功能使用的語法為：
$("option:selected").text();
option:selected − 上述語法中的option:selected被稱為偽類選擇器，它從下拉列表或表單中選擇選定的選項。
text() − 這是jQuery方法，它返回所選文字的文字值。
演算法1
步驟1 − 在文字編輯器中建立一個HTML檔案，並新增HTML基本結構。
步驟2 − 將jQuery CDN連結新增到頁面的head標籤中。
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
步驟3 − 使用HTML select選項標籤建立一個下拉列表。
<select> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> <option value="option5">option5</option> </select>
步驟4 − 新增值為“立即檢視”的按鈕。
<button>Check Now</button>
步驟5 − 在body標籤內新增script標籤，以便在其中編寫jQuery程式碼。
<script></script>
步驟6 − 使用jQuery選擇器使用偽類選擇選定的文字。
$("button").click(() => {
var o = $("option:selected").text();
alert(o)
})
步驟7 − 當用戶點選時，它將返回選項。
示例1
在這個示例中，我們將使用jQuery從下拉列表中查詢選定的選項。CSS選擇器具有偽類選擇器，它將選擇使用者選擇的元素。
<html>
<head>
<title>find all selected options</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
</head>
<body>
<h3>Choose the option from dropbox</h3>
<select>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<button>Check Now</button>
<script>
$(document).ready(() => {
$("button").click(() => {
var o = $("option:selected").text();
alert(o)
})
})
</script>
</body>
</html>
下圖顯示了使用者螢幕的輸出視窗，其中包含一個下拉框，其中包含五個選項：“option1”、“option2”、“option3”、“option4”和“option5”。因此，當用戶點選任何選項時，該屬性將被新增到該元素中。因此，偽類選擇特定元素並在使用者瀏覽器視窗中彈出。
演算法2
步驟1 − 在文字編輯器（如VS Code或Sublime Text編輯器）中建立一個HTML檔案，並新增HTML基本結構。
步驟2 − 將jQuery CDN連結新增到頁面的head標籤中。
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
步驟3 − 使用HTML <select>，<option>標籤建立一個下拉列表，並在select標籤中新增multiple屬性。
<select multiple> <option>Pizza</option> <option>Burger</option> <option>French Fries</option> <option>Dosa</option> <option>Samosa</option> </select>
步驟4 − 新增值為“立即購買”的按鈕。
<button>Buy Now</button>
步驟5 − 在body標籤內新增script標籤，以便在其中編寫jQuery程式碼。
<script></script>
步驟6 − 建立一個空陣列變數。
var o = [];
步驟7 − 使用jQuery選擇器使用偽類選擇選定的文字，並將選定的文字推入陣列。
$("button").click(() => {
o.push($("option:selected").text());
$(".answer").html(o);
})
步驟8 − 點選“立即購買”按鈕時，將顯示選定的選項。
示例2
為了在下拉選單中的多選選項中查詢選定的選項，我們將為此建立一個數組，因為使用者選擇選項時，它將被推入陣列並在使用者螢幕上顯示。為此，我們使用了食品訂購示例。
<html>
<head>
<title> find all selected options </title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
</head>
<body>
<h3>Select multiple option from dropbox</h3>
<button>Buy Now</button>
<div style="margin: 0.5rem 0;">
<select multiple>
<option>Pizza</option>
<option>Burger</option>
<option>French Fries</option>
<option>Dosa</option>
<option>Samosa</option>
</select>
</div>
<div class="answer"></div>
<script>
$(document).ready(() => {
var o = [];
$("button").click(() => {
o.push($("option:selected").text());
$(".answer").html(o);
})
})
</script>
</body>
</html>
下圖顯示了上述程式的輸出，其中當用戶在瀏覽器中載入頁面時，它會顯示一個用於多選的下拉列表，使用者可以從中選擇多個食物。當用戶點選“立即購買”按鈕時，使用者選擇的食品將顯示在使用者螢幕上。
結論
因此，我們可以得出結論，這種型別的功能可以用於食品訂購網路應用程式或此類應用程式，其中使用者希望選擇一個選項，並根據選擇的選項執行進一步的處理或功能。對於選擇多個選項，必須在select標籤中使用multiple屬性。
261 次瀏覽
