Apa yang dipilih dalam javascript?

Untuk mengubah opsi yang dipilih dalam elemen HTML <select>_ kita harus mengubah properti value pada elemen <select> atau properti

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

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

Ada berbagai cara yang dapat kita lakukan dan memilih satu atau yang lain akan bergantung pada informasi yang kita miliki tersedia untuk kita. Itu bisa berupa teks yang ditampilkan pada elemen

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

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

Mari kita lihat 6 cara berbeda untuk mengubah opsi yang dipilih menggunakan JavaScript

1. Mengubah opsi yang dipilih berdasarkan nilai

Untuk mengubah opsi yang dipilih dengan atribut value, yang harus kita lakukan adalah mengubah properti value dari elemen <select>

Kotak pilih kemudian akan memperbarui dirinya sendiri untuk mencerminkan status properti ini. Ini adalah cara termudah dan paling mudah untuk memperbarui status kotak pilih

Misalkan kita ingin memilih opsi yang berisi atribut

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

<select id="mySelect">
   <option value="ann">Ann Frank</option>
   <option value="paul" selected>Paul Allen</option>
   <option value="steve">Steve Jobs</option>
</select>

Yang harus kita lakukan adalah mengatur nilai kotak pilih ke nilai yang sama

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

Lihat Pena di CodePen

2. Mengubah opsi yang dipilih dengan teks opsi

Kami mungkin juga ingin mengubah nilai kotak pilih dengan teks elemen

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

Melakukan ini mungkin merupakan cara yang paling rumit, tetapi tetap saja, sesuatu yang relatif sederhana untuk dilakukan. Kita harus mengulangi opsi dan membandingkan teksnya dengan teks elemen yang ingin kita pilih

Setelah kami menemukan elemen yang ingin kami perbarui, kami akan memperbarui properti

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

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

Catatan. ini hanya berfungsi untuk elemen kotak pilih yang hanya menerima satu nilai. Jika Anda menggunakan kotak pilih yang mengakui beberapa elemen yang dipilih, ini hanya akan menambahkan opsi lain juga multi-pilih alih-alih mengubah yang aktif untuk yang lain

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

Lihat Pena di CodePen

Ada cara lain untuk melakukan ini dan itu akan menyelesaikan masalah dengan input multi-pilihan. Pada dasarnya, begitu kita menemukan elemen yang memiliki teks yang kita cari, alih-alih hanya mengubah properti

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

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

Lihat Pena di CodePen

3. Mengubah opsi yang dipilih berdasarkan id opsi, kelas, atau atribut

Ini juga cukup sederhana. Solusi ini juga akan berfungsi untuk input multi-pilihan dengan menetapkan satu nilai padanya

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

Lihat Pena di CodePen

Dan tentu saja, hal itu dapat dilakukan dengan cara yang sama jika kita memiliki atribut

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

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

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

// 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. Mengubah opsi yang dipilih berdasarkan indeks

Jika semua yang kita miliki adalah indeks dari elemen opsi, kita dapat mengaturnya dengan mengambil opsi kotak

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

Perhatikan bahwa indeks berbasis 0. Jadi, elemen

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

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

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

Mengetahui hal ini, jika kita ingin memilih elemen ke-3, kita akan menggunakan indeks 2 dalam kode kita untuk memilihnya.

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

Mari kita lihat cara kerjanya di acara klik

Lihat Pena di CodePen

Dan ditulis ulang agar berfungsi untuk input multi-pilihan

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

Kesimpulan

Ingatlah bahwa, apa pun cara yang Anda pilih untuk mengganti dan mengubah elemen yang dipilih pada elemen <select> Anda, sebaiknya Anda memperbarui properti value jika Anda ingin satu elemen dipilih. Jika tidak, saat memilih kotak yang menerima banyak elemen, Anda tidak akan mengganti elemen aktif tetapi hanya menambahkan elemen lain

Jika Anda sedang mempelajari JavaScript dan sepertinya agak sulit bagi Anda, tidak ada yang perlu dikhawatirkan. Akhirnya, Anda akan sampai di sana. Lihat berapa lama waktu yang dibutuhkan untuk mempelajari JavaScript dan apa cara terbaik untuk mempelajari JavaScript

Apa yang dipilih dalam tag opsi?

Apa itu pilih () dalam JavaScript?

Apa atribut yang dipilih?

Bagaimana cara menggunakan pilih dalam JavaScript?