Thuộc tính value
có thể được sử dụng để đặt hoặc cập nhật giá trị của phần tử được chọn. Để xóa lựa chọn, hãy đặt giá trị thành một chuỗi trống
Đây là HTML cho các ví dụ trong bài viết này
bobbyhadz.com
Click
Và đây là mã JavaScript liên quan
Chúng tôi đã sử dụng thuộc tính value
để đặt giá trị của phần tử được chọn
Một quy ước khi bạn không có giá trị mặc định là giá trị của phần tử option
đầu tiên là một chuỗi rỗng
Xóa lựa chọn
Để xóa lựa chọn, hãy đặt thuộc tính value
của phần tử được chọn thành một chuỗi trống
Lấy một mảng các giá trị của tất cả các phần tử tùy chọn
Nếu bạn cần một mảng các giá trị của tất cả các phần tử option
, hãy sử dụng phương thức map[]
để lặp qua các phần tử và trả về giá trị của từng phần tử option
Thay đổi giá trị của phần tử value
0
Giá trị của phần tử value
0 có thể được thay đổi giống như cách nó được đặt, chỉ cần cập nhật thuộc tính value
Nếu bạn đặt giá trị của một phần tử được chọn thành một giá trị không có trong số các phần tử_______17_______, thì giá trị của phần tử value
0 sẽ được đặt lại
Bạn có thể tạo một đối tượng lưu trữ các giá trị của các phần tử option
để tránh viết sai các giá trị
Đây là một giải pháp tốt hơn nhiều so với các chuỗi mã hóa cứng ở khắp mọi nơi vì nó tận dụng tính năng tự động hoàn thành IDE của bạn
Nó cũng giúp người đọc mã của bạn biết các giá trị thay thế của phần tử value
0 là gì
Chúng tôi đã sử dụng thuộc tính đích trên đối tượng event
. Thuộc tính
const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
0 là tham chiếu đến đối tượng [phần tử] mà sự kiện được gửi điTrong ví dụ này, thuộc tính
const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
1 trỏ đến phần tử const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
2, vì đó là phần tử mà sự kiện được gửi điĐọc hoặc đặt giá trị của phần tử const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
2
const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
Thuộc tính value
cho phép chúng ta đọc hoặc đặt giá trị của phần tử
const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
2Khi đặt giá trị của một phần tử được chọn, đảm bảo đặt nó thành một trong các giá trị của phần tử
const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
6Thuộc tính
const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
7 trên phần tử select trả về một đối tượng dạng mảng chứa tất cả các tùy chọn của phần tử selectLấy chỉ mục của phần tử const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
6 hiện được chọn
const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
Chúng ta có thể sử dụng thuộc tính
const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
9 để lấy chỉ mục của const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
6 đang được chọnconst select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
Ban đầu, nó được đặt thành change
1, nhưng nếu bạn change
2 cái
const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
9 trong hàm handleChange
và thay đổi phần tử đã chọn, bạn sẽ thấy chỉ số thay đổiNhận văn bản và giá trị của tùy chọn đã chọn bằng cách sử dụng chỉ mục
Thuộc tính
const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
9 có thể được sử dụng để lấy chỉ mục của phần tử const select = document.getElementById['select'];
console.log[select.selectedIndex];
select.addEventListener['change', function handleChange[event] {
console.log[select.selectedIndex];
}];
6 hiện được chọn. Chỉ mục có thể được sử dụng để lấy value
và text
của phần tử