JavaScript chọn giá trị tùy chọn

Truy xuất giá trị đã chọn từ một phần tử được thực hiện bằng cách sử dụng thuộc tính giá trị selectElement. value Trong đoạn mã trên, tài liệu HTML có một phần tử. Id của nó được đặt thành lời chào và nó có ba tùy chọn để chọn. Mỗi tùy chọn có một thuộc tính giá trị – thuộc tính giá trị này có thể giống với văn bản hoặc không – bạn có thể tự do chỉ định bất kỳ giá trị nào bạn thích

Trong mã JavaScript ở trên, giá trị của phần tử được chuyển vào dưới dạng đối số cho bảng điều khiển. nhật ký(). Phần tử được truy xuất bằng cách sử dụng tài liệu. getElementById(), tìm một phần tử trong tài liệu với id được chỉ định

Thuộc tính giá trị trả về giá trị của tùy chọn hiện được hiển thị trong trình đơn thả xuống

Tuy nhiên, trong ví dụ trên, việc in ra bàn điều khiển sẽ chỉ xảy ra một lần. Nếu người dùng chọn một tùy chọn mới, giá trị mới sẽ không được in vào nhật ký

Có ba cách phổ biến để giải quyết vấn đề này

1. sự kiện DOM

Giải pháp đầu tiên là sử dụng các sự kiện DOM để gọi một trình xử lý sự kiện. Lấy mã ví dụ sau

HTML

Phần tử ở trên sử dụng sự kiện onchange DOM. Sự kiện onchange kích hoạt bất cứ khi nào một giá trị khác được chọn từ danh sách thả xuống. Sau đó, sự kiện kích hoạt hàm getOption(), hiển thị kết quả. Hàm JavaScript getOption() { bảng điều khiển. nhật ký (tài liệu. getElementById('lời chào'). giá trị); . Điều này có nghĩa là hàm xử lý không được gọi trừ khi giá trị của trình đơn thả xuống thay đổi. Có những sự kiện khác mà chúng ta có thể sử dụng thay cho onchange, nhưng mỗi sự kiện đều có những vấn đề riêng. Sự kiện onclick luôn trả về tùy chọn đầu tiên trong danh sách trước, vì người dùng phải nhấp vào menu thả xuống để mở danh sách lựa chọn. Khi một phần tử mới được chọn, trình xử lý sự kiện sẽ được gọi lại và giá trị đã chọn được trả về như mong đợi. Sự kiện onblur trả về giá trị chính xác, nhưng chỉ kích hoạt hàm xử lý khi trường mất tiêu điểm. Điều này có thể là do người dùng nhấp vào nơi khác trên trang hoặc sử dụng phím tab để di chuyển đến một trường khác. 2. Thêm tùy chọn “tiêu đề” giữ chỗ Do hành vi của trình xử lý sự kiện với menu chọn, một giải pháp phổ biến là sử dụng phần tử giữ chỗ làm tùy chọn đầu tiên. Phần tử giữ chỗ này đưa ra lời nhắc ngắn gọn về cách sử dụng trình đơn thả xuống. Lấy mã ví dụ sau. HTML

Điều này xác định một menu thả xuống với tùy chọn mặc định là một trình giữ chỗ có nội dung “Chọn lời chào của bạn”. Bây giờ, một sự thay đổi phải xảy ra nếu người dùng muốn chọn một lời chào

Ghi chú. Trong ví dụ trên, có thể chọn tùy chọn “Chọn lời chào của bạn”. Mặc dù lần nhấp đầu tiên vào trình giữ chỗ sẽ không gọi getOption() (vì không có thay đổi nào được thực hiện), nhưng có thể chọn trình giữ chỗ sau khi thay đổi được thực hiện. Theo mặc định, giá trị của tùy chọn này sẽ bằng chính văn bản của tùy chọn đó – trong ví dụ trên, giá trị sẽ là Chuỗi chứa “Pick your welcome”

Chúng ta có thể xây dựng điều này bằng cách thêm một giá trị tiện lợi vào tùy chọn mặc định này, sau đó lọc nó ra khi bắt đầu hàm getSelection() của chúng ta. Mã ví dụ sau minh họa cách thực hiện việc này

JavaScript

function getOption(el) {
  const option = el.value;
  if (option === 'esc') return
    console.log(option);
  return option;
}

Bây giờ, khi tùy chọn “Chọn lời chào của bạn” được chọn, bảng điều khiển. nhật ký (tùy chọn) sẽ không xảy ra

Ghi chú. giá trị mặc định của phần tử tùy chọn là văn bản xuất hiện giữa

thẻ. Điều này được thay đổi bằng cách thêm một thuộc tính giá trị. Nếu có một thuộc tính giá trị, nó sẽ được ưu tiên hơn giá trị mặc định

3. Sử dụng một biểu mẫu

Tùy chọn thứ ba là sử dụng Biểu mẫu. Các biểu mẫu cần phải được gửi và khi chúng được gửi, tất cả các giá trị từ tất cả các đầu vào có thể được sắp xếp thành một Đối tượng, đây là cách phổ biến để lưu trữ dữ liệu trong JavaScript. Bạn cũng có thể lưu trữ nội dung của biểu mẫu trong Mảng hoặc Chuỗi, tùy thuộc vào yêu cầu của ứng dụng của bạn. Mã mẫu sau minh họa cách sử dụng biểu mẫu để truy xuất giá trị của danh sách thả xuống trên trang

HTML

  
    
    
    
  
  
    
    
    
  
  Submit

JavaScript

function submitForm(ev) {
  ev.preventDefault();
  let selectInputs = document.querySelectorAll('select');
  let res = [];
  selectInputs.forEach(input => {
   res.push(input.value)
  })
  return res;
}

Biểu mẫu cho phép xử lý nhiều đầu vào, chỉ thu thập tất cả thông tin một lần khi biểu mẫu được gửi. Trong ví dụ trên, có hai menu trong. Biểu mẫu ở trên được gửi bằng cách nhấp vào nút Gửi để gọi trình xử lý sự kiện submitForm(). Hàm này nhận sự kiện DOM kích hoạt dưới dạng tham số – trong trường hợp này, hàm nhận sự kiện onclick. Theo mặc định, việc gửi biểu mẫu dẫn đến việc làm mới trang. Thao tác này sẽ xóa tất cả dữ liệu mà người dùng đã chèn, đặt lại biểu mẫu về giá trị mặc định của nó. Đoạn mã trên ngăn điều này xảy ra bằng cách lấy sự kiện nhận được làm tham số và áp dụng phương thức preventDefault() cho nó. Điều này ngăn việc làm mới trang và mất dữ liệu sau đó. Dòng tiếp theo tìm tất cả các thành phần trong biểu mẫu và khai báo sắp xếp lại mà dữ liệu sẽ được chèn vào. Nhớ tài liệu đó. querySelectorAll() trả về một mảng, đó là lý do tại sao cần có một phương thức lặp lại – e. g. cho mỗi(). forEach() lấy từng phần tử đầu vào có trong mảng được trả về bởi querySelectorAll, sau đó đẩy giá trị của nó lên res

Làm cách nào để chọn giá trị tùy chọn trong JavaScript?

Cách lấy giá trị thuộc tính tùy chọn trong JavaScript?

Làm cách nào để lấy giá trị được chọn trong danh sách thả xuống trong JavaScript?

Làm cách nào để đặt tùy chọn chọn bằng JavaScript?