HTMLOptionElement: hàm khởi tạo Option()
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.
Hàm khởi tạo Option() tạo một HTMLOptionElement mới.
Cú pháp
new Option()
new Option(text)
new Option(text, value)
new Option(text, value, defaultSelected)
new Option(text, value, defaultSelected, selected)
Tham số
textOptional-
Một chuỗi đại diện cho nội dung của phần tử, tức là văn bản được hiển thị. Nếu không được chỉ định, giá trị mặc định là "" (chuỗi rỗng).
valueOptional-
Một chuỗi đại diện cho giá trị của
HTMLOptionElement, tức là thuộc tính value của phần tử<option>tương đương. Nếu không được chỉ định, giá trị củatextđược dùng làm giá trị, ví dụ cho giá trị của phần tử<select>liên quan khi biểu mẫu được gửi đến máy chủ. defaultSelectedOptional-
Giá trị
truehoặcfalseđặt giá trị của thuộc tínhselected, tức là để<option>này trở thành giá trị mặc định được chọn trong phần tử<select>khi trang được tải lần đầu. Nếu không được chỉ định, giá trị mặc định là false. Lưu ý rằng giá trịtruekhông đặt tùy chọn thành đã chọn nếu nó chưa được chọn. selectedOptional-
Giá trị
truehoặcfalseđặt trạng thái được chọn của tùy chọn; mặc định là false (không được chọn). Nếu bị bỏ qua, ngay cả khi đối sốdefaultSelectedlà true, tùy chọn vẫn không được chọn.
Ví dụ
Chỉ thêm các tùy chọn mới
/* giả sử chúng ta có HTML sau
<select id='s'>
</select>
*/
const s = document.getElementById("s");
const options = [Four, Five, Six];
options.forEach((element, key) => {
s[key] = new Option(element, key);
});
Thêm các tùy chọn với các tham số khác nhau
<select id="s"></select>
const s = document.getElementById("s");
const options = ["zero", "one", "two"];
options.forEach((element, key) => {
if (element === "zero") {
s[key] = new Option(element, s.options.length, false, false);
}
if (element === "one") {
s[key] = new Option(element, s.options.length, true, false); // Sẽ thêm thuộc tính "selected"
}
if (element === "two") {
s[key] = new Option(element, s.options.length, false, true); // Sẽ thực sự được chọn trong giao diện
}
});
Kết quả:
<select id="s">
<option value="0">zero</option>
<option value="1" selected>one</option>
<option value="2">two</option>
<!-- Người dùng sẽ thấy two là 'đã chọn' -->
</select>
Thông số kỹ thuật
| Specification |
|---|
| HTML # dom-option-dev |