HTMLSelectElement: thuộc tính selectedOptions
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính chỉ đọc HTMLSelectElement selectedOptions chứa danh sách các phần tử <option> nằm trong phần tử <select> hiện đang được chọn. Danh sách các option đã chọn là một đối tượng HTMLCollection với một mục cho mỗi option hiện được chọn.
Một option được xem là đã chọn nếu nó có thuộc tính HTMLOptionElement.selected.
Giá trị
Một HTMLCollection liệt kê mọi HTMLOptionElement hiện được chọn, là phần tử con của HTMLSelectElement hoặc của một HTMLOptGroupElement trong phần tử <select>.
Nói cách khác, bất kỳ option nào nằm trong phần tử <select> đều có thể thuộc kết quả, nhưng các nhóm option không được bao gồm trong danh sách.
Nếu không có option nào hiện được chọn, tập hợp sẽ rỗng và trả về length bằng 0.
Ví dụ
Trong ví dụ này, một phần tử <select> với nhiều option được dùng để cho phép người dùng đặt món ăn.
HTML
HTML tạo hộp chọn và các phần tử <option> đại diện cho từng món ăn trông như sau:
<label for="foods">What do you want to eat?</label><br />
<select id="foods" name="foods" size="7" multiple>
<option value="1">Burrito</option>
<option value="2">Cheeseburger</option>
<option value="3">Double Bacon Burger Supreme</option>
<option value="4">Pepperoni Pizza</option>
<option value="5">Taco</option>
</select>
<br />
<button name="order" id="order">Order Now</button>
<p id="output"></p>
Phần tử <select> được đặt để cho phép chọn nhiều mục và cao 7 hàng. Cũng lưu ý phần tử <button>, nhiệm vụ của nó là kích hoạt việc lấy HTMLCollection của các phần tử đã chọn bằng thuộc tính selected.
JavaScript
Mã JavaScript thiết lập trình xử lý sự kiện cho nút, cũng như chính trình xử lý đó, trông như sau:
let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");
orderButton.addEventListener("click", () => {
let collection = itemList.selectedOptions;
let output = "";
for (let i = 0; i < collection.length; i++) {
if (output === "") {
output = "Your order for the following items has been placed: ";
}
output += collection[i].label;
if (i === collection.length - 2 && collection.length < 3) {
output += " and ";
} else if (i < collection.length - 2) {
output += ", ";
} else if (i === collection.length - 2) {
output += ", and ";
}
}
if (output === "") {
output = "You didn't order anything!";
}
outputBox.textContent = output;
});
Script này thiết lập một trình nghe sự kiện click trên nút "Order Now". Khi được nhấp, trình xử lý sự kiện sẽ lấy danh sách các option được chọn bằng selectedOptions, rồi lặp qua các option trong danh sách. Một chuỗi được xây dựng để liệt kê các mục đã đặt, với logic tạo danh sách theo đúng quy tắc ngữ pháp tiếng Anh (bao gồm serial comma).
Kết quả
Nội dung tạo ra sẽ trông như sau khi hoạt động:
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # dom-select-selectedoptions-dev |