Bagaimana Anda memilih nilai dalam javascript?

select()

Tidak ada

Tidak ada (undefined)

Klik tombol dalam contoh ini untuk memilih semua teks dalam elemen <input>

<input type="text" id="text-box" size="20" value="Hello world!" />
<button onclick="selectText()">Select text</button>

function selectText() {
  const input = document.getElementById('text-box');
  input.focus();
  input.select();
}

Memanggil element.select() belum tentu memfokuskan input, sehingga sering digunakan dengan

<input type="text" id="text-box" size="20" value="Hello world!" />
<button onclick="selectText()">Select text</button>

Di browser yang tidak mendukungnya, dimungkinkan untuk menggantinya dengan panggilan ke HTMLInputElement. setSelectionRange() dengan parameter 0 dan panjang nilai masukan

Properti value_ dapat digunakan untuk mengatur atau memperbarui nilai elemen pilih. Untuk menghapus pilihan, setel nilai ke string kosong

Berikut adalah HTML untuk contoh dalam artikel ini

  
    
    bobbyhadz.com
  

  
    
      
      
      
      
    

    Click

    
  

Dan inilah kode JavaScript terkait

Kami menggunakan properti value untuk menetapkan nilai elemen pilih

Konvensi ketika Anda tidak memiliki nilai default adalah membuat nilai elemen option pertama menjadi string kosong

Menghapus pilihan

Untuk menghapus pilihan, setel properti value_ dari elemen pilih ke string kosong

Mendapatkan larik nilai dari semua elemen opsi

Jika Anda memerlukan larik nilai dari semua elemen option, gunakan metode map() untuk mengulangi elemen dan mengembalikan nilai setiap option

Mengubah nilai elemen value_0

Nilai elemen value_0 dapat diubah dengan cara yang sama seperti yang ditetapkan, cukup perbarui properti value

Jika Anda menetapkan nilai elemen pilih ke nilai yang tidak ada di antara elemenoption, nilai elemen value0 akan disetel ulang

Anda dapat membuat objek yang menyimpan nilai dari elemen option untuk menghindari salah mengeja nilai

Ini adalah solusi yang jauh lebih baik daripada string pengkodean keras di semua tempat karena ini memanfaatkan pelengkapan otomatis IDE Anda

Ini juga membantu pembaca kode Anda mengetahui nilai alternatif dari elemen value0

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 mengatur 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

Bagaimana cara mendapatkan nilai pilih dengan JavaScript?

Bagaimana cara memilih nilai tertentu dari dropdown?

Bagaimana cara mendapatkan nilai yang dipilih dalam dropdown di JavaScript?

Bagaimana Anda memilih nilai opsi?