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ọnNế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ử value0Giá 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);
});
2Thuộ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ọnChú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ụcThuộ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ử |