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'
};1 pada elemen const changeSelected = (e) => {
const $select = document.querySelector('#mySelect');
$select.value = 'steve'
};2 yang ingin kita pilih
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'
};3, indeksnya, const changeSelected = (e) => {
const $select = document.querySelector('#mySelect');
$select.value = 'steve'
};4 dll
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'
};8
<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'
};2 yang ditampilkan kepada pengunjung
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'
};1 dan menyetelnya ke 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. Dengan cara ini, kotak pilih juga akan memperbarui dirinya sendiri untuk mencerminkan perubahan ini
const changeSelected = (e) => {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 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'
};1, kita akan mendapatkan atribut value dan menggunakannya untuk menyetelnya sebagai satu-satunya nilai untuk seluruh kotak pilihan
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;
};4 alih-alih const changeSelected = (e) => {
const $select = document.querySelector('#mySelect');
$select.value = 'steve'
};4 atau atribut lainnya seperti 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. Ubah saja kueri untuk mendapatkan elemen opsi
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;
};8. Kemudian kita hanya perlu memilih yang kita butuhkan dari array dengan indeksnya
Perhatikan bahwa indeks berbasis 0. Jadi, elemen const changeSelected = (e) => {
const $select = document.querySelector('#mySelect');
$select.value = 'steve'
};2 pertama akan memiliki indeks 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, 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 berikutnya, dan seterusnya
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