Bộ chọn options

Đối tượng HTML DOM Select

Định nghĩa và cách sử dụng

options Mang trả về tất cả các phần tử trong danh sách rơi xuống 元 tố của bộ sưu tập.

Ghi chú:Các phần tử trong bộ sưu tập được sắp xếp theo thứ tự xuất hiện trong mã nguồn.

Mô hình

Ví dụ 1

Xem số lượng tùy chọn trong danh sách rơi cụ thể này:

var x = document.getElementById("mySelect").options.length;

Thử ngay

Kết quả của x sẽ là:

4

Lưu ý:Có thêm ví dụ ở dưới trang.

Cú pháp

selectObject.options

Thuộc tính

Thuộc tính Mô tả
length

Trả về số lượng phần tử <option> trong bộ sưu tập.

Ghi chú:Thuộc tính này là chỉ đọc
selectedIndex Cài đặt hoặc trả về chỉ số của phần tử <option> đã chọn trong bộ sưu tập (bắt đầu từ 0).

Phương pháp

Phương pháp Mô tả
[index]

Trả về phần tử <option> có chỉ số chỉ định (bắt đầu từ 0) từ bộ sưu tập.

Ghi chú:Nếu số thứ tự chỉ số vượt ra ngoài phạm vi, trả về null.
[add(option[,index] Thêm phần tử <option> vào vị trí chỉ số chỉ định trong bộ sưu tập. Nếu không chỉ định chỉ số, tùy chọn sẽ được chèn vào cuối bộ sưu tập.
item(index)

Trả về phần tử <option> có chỉ số chỉ định (bắt đầu từ 0) từ bộ sưu tập.

Ghi chú:Nếu số thứ tự chỉ số vượt ra ngoài phạm vi, trả về null.
namedItem(id)

Trả về phần tử <option> có ID chỉ định từ bộ sưu tập.

Ghi chú:Nếu id Nếu không tồn tại, trả về null.
remove(index) Loại bỏ phần tử <option> có chỉ số chỉ định từ bộ sưu tập.

Chi tiết kỹ thuật

Phiên bản DOM: Core Level 2 Document Object
Giá trị trả về:

Đối tượng HTMLOptionsCollection, biểu thị 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 theo thứ tự xuất hiện trong mã nguồn.

Các ví dụ khác

Ví dụ 2: [index]

Lấy văn bản của tùy chọn đầu tiên trong danh sách rơi (chỉ số 0):

var x = document.getElementById("mySelect").options[0].text;

Thử ngay

Kết quả của x sẽ là:

Táo

Ví dụ 3: item(index)

Lấy văn bản của tùy chọn đầu tiên trong danh sách rơi (chỉ số 0):

var x = document.getElementById("mySelect").options.item(0).text;

Thử ngay

Kết quả của x sẽ là:

Táo

Ví dụ 4: namedItem(id)

Lấy văn bản của tùy chọn có id="orange" trong danh sách rơi:

var x = document.getElementById("mySelect").options.namedItem("orange").text;

Thử ngay

Kết quả của x sẽ là:

Cam

Ví dụ 5

Thêm tùy chọn “Kiwi” vào vị trí chỉ số danh sách rơi “1”:

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);

Thử ngay

Ví dụ 6

Xóa tùy chọn có chỉ số "1" trong danh sách thả xuống:

var x = document.getElementById("mySelect"); x.options.remove(1);

Thử ngay

Ví dụ 7

Lặp qua tất cả các tùy chọn trong danh sách thả xuống và hiển thị văn bản của mỗi 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>";
}

Thử ngay

Kết quả của x sẽ là:

Táo
Cam
Dâu tây
Chuối

Ví dụ 8

Chọn một tùy chọn trong danh sách thả xuống và hiển thị 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;

Thử ngay

Kết quả của x sẽ là:

Chuối

Ví dụ 9

Cập nhật các tùy chọn trong danh sách thả xuống dựa trên tùy chọn đã chọn trong 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);
    }
  }
}

Thử ngay

Hỗ trợ trình duyệt Bộ sưu tập options Yes Yes Yes Yes Yes

Đối tượng HTML DOM Select