Chọn các tùy chọn Bộ sưu tập
Thí dụ
Tìm hiểu xem có bao nhiêu tùy chọn trong danh sách thả xuống cụ thể:
var x = document.getElementById("mySelect").options.length;
Kết quả của x sẽ là:
4
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Bộ sưu tập tùy chọn trả về một bộ sưu tập tất cả các phần tử <option> trong danh sách thả xuống.
Lưu ý: Các phần tử trong bộ sưu tập được sắp xếp như chúng xuất hiện trong mã nguồn.
Hỗ trợ trình duyệt
| Collection | |||||
|---|---|---|---|---|---|
| options | Yes | Yes | Yes | Yes | Yes |
Cú pháp
selectObject.options
Tính chất
| Property | Description |
|---|---|
| length | Returns the number of <option> elements in the collection. Note: This property is read-only |
| selectedIndex | Sets or returns the index of the selected <option> element in the collection (starts at 0) |
Phương pháp
| Method | Description |
|---|---|
| [index] | Returns the <option> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
| [add(option[,index])] | Adds an <option> element into the collection at the specified index. If no index is specified, it inserts the option at the end of the collection |
| item(index) | Returns the <option> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
| namedItem(id) | Returns the <option> element from the collection with the specified id. Note: Returns null if the id does not exist |
| remove(index) | Removes the <option> element with the specified index from the collection |
Chi tiết kỹ thuật
| Phiên bản DOM: | Đối tượng tài liệu cấp 2 cốt lõi |
|---|---|
| Giá trị trả lại: | Một đối tượng HTMLOptionsCollection, đại diện cho tất cả các phần tử <option> trong phần tử <select>. Các phần tử trong bộ sưu tập được sắp xếp khi chúng xuất hiện trong mã nguồn |
Các ví dụ khác
Thí dụ
[ chỉ mục ]
Lấy văn bản của tùy chọn đầu tiên (chỉ mục 0) trong danh sách thả xuống:
var x = document.getElementById("mySelect").options[0].text;
Kết quả của x sẽ là:
Apple
Thí dụ
item ( chỉ mục )
Lấy văn bản của tùy chọn đầu tiên (chỉ mục 0) trong danh sách thả xuống:
var x = document.getElementById("mySelect").options.item(0).text;
Kết quả của x sẽ là:
Apple
Thí dụ
NameItem ( id )
Nhận văn bản của tùy chọn có id = "orange" trong danh sách thả xuống:
var x = document.getElementById("mySelect").options.namedItem("orange").text;
Kết quả của x sẽ là:
Orange
Thí dụ
Thêm tùy chọn "Kiwi" ở vị trí chỉ mục "1" trong danh sách thả xuống:
var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);
Thí dụ
Xóa tùy chọn có chỉ mục "1" khỏi danh sách thả xuống:
var x = document.getElementById("mySelect");
x.options.remove(1);
Thí dụ
Lặp qua tất cả các tùy chọn trong danh sách thả xuống và xuất văn bản của từng tùy chọn:
var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + x.options[i].text + "<br>";
}
Kết quả của txt sẽ là:
Apple
Orange
Pineapple
Banana
Thí dụ
Chọn một tùy chọn trong danh sách thả xuống và xuất văn bản của tùy chọn đã chọn trong phần tử có id = "demo":
var x = document.getElementById("mySelect");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;
Kết quả có thể là:
Banana
Thí dụ
Thay đổi các tùy chọn trong danh sách thả xuống tùy thuộc vào tùy chọn đã chọn trong một danh sách thả xuống khác:
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];
function ChangeCarList() {
var carList = document.getElementById("car");
var modelList = document.getElementById("carmodel");
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length) {
modelList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
var i;
for (i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i);
modelList.options.add(car);
}
}
}
❮ Chọn đối tượng