Làm cách nào để nhận giá trị của thẻ chọn trong JavaScript?

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ử value0

Giá trị của phần tử value0 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ử value0 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ử value0 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 đi

Trong 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

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);
});

2

Khi đặ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);
});

6

Thuộ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ử select

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ú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ọn

const 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 change1, nhưng nếu bạn change2 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 đổi

Nhậ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ử