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

const changeSelected = (e) => {
  const $select = document.querySelector('#mySelect');
  $select.value = 'steve'
};

Có nhiều cách khác nhau mà chúng tôi có thể thực hiện và việc chọn cách này hay cách khác sẽ phụ thuộc vào thông tin chúng tôi có sẵn cho mình. Nó có thể là văn bản được hiển thị trên phần tử

const changeSelected = (e) => {
  const $select = document.querySelector('#mySelect');
  $select.value = 'steve'
};

const changeSelected = (e) => {
  const $select = document.querySelector('#mySelect');
  $select.value = 'steve'
};

Hãy xem 6 cách khác nhau để thay đổi tùy chọn đã chọn bằng JavaScript

1. Thay đổi tùy chọn đã chọn theo giá trị

Để thay đổi tùy chọn đã chọn bằng thuộc tính value, tất cả những gì chúng ta phải làm là thay đổi thuộc tính value của phần tử

Hộp chọn sau đó sẽ tự cập nhật để phản ánh trạng thái của thuộc tính này. Đây là cách dễ nhất và đơn giản nhất để cập nhật trạng thái hộp chọn

Giả sử chúng ta muốn chọn tùy chọn có chứa thuộc tính

const changeSelected = (e) => {
  const $select = document.querySelector('#mySelect');
  $select.value = 'steve'
};

8

<select id="mySelect">
   <option value="ann">Ann Frankoption>
   <option value="paul" selected>Paul Allenoption>
   <option value="steve">Steve Jobsoption>
select>

Tất cả những gì chúng ta phải làm là đặt giá trị của hộp chọn thành cùng giá trị đó

const changeSelected = (e) => {
  const $select = document.querySelector('#mySelect');
  $select.value = 'steve'
};

Xem Bút trên CodePen

2. Thay đổi tùy chọn đã chọn bằng văn bản tùy chọn

Chúng tôi cũng có thể muốn thay đổi giá trị của hộp chọn bằng văn bản của phần tử

const changeSelected = (e) => {
  const $select = document.querySelector('#mySelect');
  $select.value = 'steve'
};

2 được hiển thị cho khách truy cập

Làm điều này có lẽ là cách phức tạp nhất, tuy nhiên, một cái gì đó tương đối đơn giản để làm. Chúng tôi phải lặp lại các tùy chọn và so sánh văn bản của chúng với văn bản của phần tử mà chúng tôi muốn chọn

Khi chúng tôi tìm thấy phần tử mà chúng tôi muốn cập nhật, chúng tôi sẽ cập nhật thuộc tính

const changeSelected = (e) => {
  const $select = document.querySelector('#mySelect');
  $select.value = 'steve'
};

1 của nó và đặt nó thành

const changeSelected = (e) => {
  const text = 'Steve Jobs';
  const $select = document.querySelector('#mySelect');
  const $options = Array.from($select.options);
  const optionToSelect = $options.find(item => item.text ===text);
  optionToSelect.selected = true;
};

1. Bằng cách này, hộp chọn cũng sẽ tự cập nhật để phản ánh thay đổi này

Ghi chú. điều này chỉ hoạt động đối với các thành phần hộp chọn chỉ thừa nhận một giá trị duy nhất. Nếu bạn đang sử dụng hộp chọn thừa nhận nhiều phần tử được chọn, điều này sẽ chỉ thêm một tùy chọn khác vào đa lựa chọn thay vì thay đổi phần tử đang hoạt động cho phần tử khác

const changeSelected = (e) => {
  const text = 'Steve Jobs';
  const $select = document.querySelector('#mySelect');
  const $options = Array.from($select.options);
  const optionToSelect = $options.find(item => item.text ===text);
  optionToSelect.selected = true;
};

Xem Bút trên CodePen

Có một cách khác để thực hiện việc này và cách đó sẽ giải quyết vấn đề với đầu vào nhiều lựa chọn. Về cơ bản, khi chúng tôi tìm thấy phần tử có văn bản mà chúng tôi đang tìm kiếm, thay vì chỉ thay đổi thuộc tính

const changeSelected = (e) => {
  const $select = document.querySelector('#mySelect');
  $select.value = 'steve'
};

1 của nó, chúng tôi sẽ lấy thuộc tính value của nó và sử dụng nó để đặt nó làm giá trị duy nhất cho toàn bộ hộp chọn

const changeSelected = (e) => {
  const text = 'Steve Jobs';
  const $select = document.querySelector('#mySelect');
  const $options = Array.from($select.options);
  const optionToSelect = $options.find(item => item.text ===text);

  // Here's the trick:
  $select.value = optionToSelect.value;
};

Xem Bút trên CodePen

3. Thay đổi tùy chọn đã chọn theo tùy chọn id, lớp hoặc thuộc tính

Cái này cũng khá đơn giản. Giải pháp này cũng sẽ hoạt động đối với các đầu vào có nhiều lựa chọn bằng cách chỉ định một giá trị duy nhất cho nó

const changeSelected = (e) => {
    const $select = document.querySelector('#mySelect');
    const $option = $select.querySelector('#myId');
    $select.value = $option.value;
};

Xem Bút trên CodePen

Và tất nhiên, nó có thể được thực hiện theo cách tương tự nếu chúng ta có thuộc tính

const changeSelected = (e) => {
  const text = 'Steve Jobs';
  const $select = document.querySelector('#mySelect');
  const $options = Array.from($select.options);
  const optionToSelect = $options.find(item => item.text ===text);
  optionToSelect.selected = true;
};

4 thay vì

const changeSelected = (e) => {
  const $select = document.querySelector('#mySelect');
  $select.value = 'steve'
};

4 hoặc bất kỳ thuộc tính nào khác như

const changeSelected = (e) => {
  const text = 'Steve Jobs';
  const $select = document.querySelector('#mySelect');
  const $options = Array.from($select.options);
  const optionToSelect = $options.find(item => item.text ===text);
  optionToSelect.selected = true;
};

6. Chỉ cần thay đổi truy vấn để lấy phần tử tùy chọn

// Using id
const $option = $select.querySelector('#myId');

// Using classname
const $option = $select.querySelector('#mySelect .myId');

// Using data-attribute
const $option = $select.querySelector('#mySelect [data-selected="myElement"]');

4. Thay đổi tùy chọn đã chọn theo chỉ mục

Nếu tất cả những gì chúng ta có là chỉ mục của phần tử tùy chọn, chúng ta có thể thiết lập bằng cách truy xuất các tùy chọn hộp

const changeSelected = (e) => {
  const text = 'Steve Jobs';
  const $select = document.querySelector('#mySelect');
  const $options = Array.from($select.options);
  const optionToSelect = $options.find(item => item.text ===text);
  optionToSelect.selected = true;
};

8. Sau đó, chúng ta chỉ phải chọn cái chúng ta cần từ mảng theo chỉ mục của nó

Lưu ý rằng chỉ mục dựa trên 0. Vì vậy, phần tử

const changeSelected = (e) => {
  const $select = document.querySelector('#mySelect');
  $select.value = 'steve'
};

2 đầu tiên sẽ có chỉ số

const changeSelected = (e) => {
  const text = 'Steve Jobs';
  const $select = document.querySelector('#mySelect');
  const $options = Array.from($select.options);
  const optionToSelect = $options.find(item => item.text ===text);

  // Here's the trick:
  $select.value = optionToSelect.value;
};

0, phần tử tiếp theo là

const changeSelected = (e) => {
  const text = 'Steve Jobs';
  const $select = document.querySelector('#mySelect');
  const $options = Array.from($select.options);
  const optionToSelect = $options.find(item => item.text ===text);

  // Here's the trick:
  $select.value = optionToSelect.value;
};

1, v.v.

Biết được điều này, nếu chúng ta muốn chọn phần tử thứ 3, chúng ta sẽ sử dụng chỉ số 2 trong mã của mình để chọn phần tử đó

// Selecting the 3rd option (Demo 2)
document.querySelector('#mySelect').querySelector('option')[2].selected = 'selected'

Hãy xem nó hoạt động trên một sự kiện nhấp chuột

Xem Bút trên CodePen

Và được viết lại để hoạt động cho các đầu vào đa lựa chọn

// Selecting the 3rd option (Demo 2)
const $select = document.querySelector('#mySelect');
$select.value = $select.querySelector('option')[2].value;

Phần kết luận

Hãy nhớ rằng, cho dù bạn chọn sử dụng cách nào để thay thế và thay đổi phần tử đã chọn trên các phần tử

của mình, tốt hơn hết bạn nên cập nhật thuộc tính value nếu bạn muốn chọn một phần tử duy nhất. Mặt khác, khi có các hộp chọn thừa nhận nhiều phần tử, bạn sẽ không thay thế phần tử đang hoạt động mà chỉ thêm một phần tử khác

Nếu bạn đang học JavaScript và điều này có vẻ hơi khó khăn với bạn, không có gì phải lo lắng cả. Cuối cùng, bạn sẽ đến đó. Xem mất bao lâu để học JavaScript và đâu là cách tốt nhất để học JavaScript