Tutorial ini akan mentakrifkan prosedur untuk menambah pilihan daripada teks input kepada teg pilih menggunakan JavaScript.
Bagaimana untuk Menambah Pilihan untuk Memilih Tag Daripada Teks Input Menggunakan JavaScript?
Untuk menambah pilihan daripada teks input pada teg pilihan menggunakan JavaScript, anda boleh menggunakan kaedah yang berbeza, seperti:
Mari kita terokai setiap kaedah satu demi satu!
Kaedah 1: Tambah Pilihan untuk Pilih Teg Daripada Teks Input Menggunakan Kaedah add() dengan Pembina Pilihan
Untuk menambah pilihan daripada teks input dalam teg pilih, gunakan ' Tambah() ' kaedah dengan ' Pilihan ” Pembina. Kaedah add() digunakan untuk menambah elemen pada pilihan “ HTMLSelectElement ” juga dikenali sebagai teg
Sintaks
Ikuti sintaks yang disediakan untuk menggunakan kaedah add() untuk menambah pilihan dalam teg pilih:
Tambah ( pilihan, existingOption ) ;Di sini, ' pilihan ” mewakili pilihan baharu yang akan ditambah sebagai ganti “ Pilihan sedia ada ”.
Contoh
Kami akan mencipta medan input, menu lungsur menggunakan
< pilih id = 'pilihan' >
< nilai pilihan = 'c' > C pilihan >
pilih >
< br >< br >
< id butang = 'tambah btn' onclick = 'insertOption()' > Tambah Pilihan butang >
Dalam fail JS, tentukan fungsi bernama “ insertOption() ' dan kemudian akses butang, kotak teks dan elemen pilih dengan id yang ditetapkan menggunakan ' querySelector() ” kaedah. Kemudian, buat contoh pilihan menggunakan pembina Pilihan, dan panggil kaedah add() dengan menghantar pilihan sedia ada dan pilihan baharu yang perlu ditambah pada penghujung senarai:
functioninsertOption ( ){
const addBtn = dokumen. querySelector ( '#addbtn' ) ;
const kotak senarai = dokumen. querySelector ( '#options' ) ;
const jatuh turun = dokumen. querySelector ( '#txt' ) ;
const pilihan = baru Pilihan ( jatuh turun. nilai , lungsur turun. nilai ) ;
kotak senarai. Tambah ( pilihan, tidak ditentukan ) ;
jatuh turun. nilai = '' ;
jatuh turun. fokus ( ) ;
}
Output menunjukkan bahawa pilihan baharu daripada medan teks ditambahkan pada penghujung menu lungsur:
Catatan: Anda boleh menggunakan kaedah ini untuk menambah pilihan pada permulaan teg pilih dengan menambah nilai pilihan sedia ada sebagai parameter kedua dan bukannya tidak ditentukan. Ia akan menambah pilihan baharu sebelum pilihan sedia ada.
Mari beralih ke kaedah lain!
Kaedah 2: Tambah Pilihan untuk Pilih Tag Daripada Teks Input Menggunakan createElement() Dengan kaedah appendChild()
Terdapat satu lagi pendekatan yang anda gunakan untuk mencipta elemen baharu menggunakan “ createElement() ' kaedah dengan ' appendChild() ” kaedah. Dengan menggunakan metodologi ini, kami akan menambah pilihan pada permulaan teg pilih.
Sintaks
Gunakan sintaks berikut untuk menambah pilihan dalam teg pilih daripada teks input menggunakan kaedah appendChild():
appendChild ( newOptionValue ) ;Contoh
Di sini, kami akan membuat senarai juntai bawah dengan menambah dua pilihan “ C ” dan “ C++ ”, medan input dan butang yang akan memanggil fungsi JavaScript yang ditakrifkan pengguna bernama “ insertOption() ” apabila acara onclicknya dicetuskan:
< jenis input = 'teks' ID = 'txt' pemegang tempat = 'Masukkan teks untuk menambah pilihan' >< pilih id = 'jatuh turun' >
< pilihan > C pilihan >
< pilihan > C ++ pilihan >
pilih >
< br >< br >
< butang onclick = 'insertOption();' > Tambah Pilihan butang >
Dalam fungsi bernama ' insertOption() ”, mula-mula akses elemen pilih dan medan teks menggunakan id yang ditetapkan dan kemudian, panggil kaedah createElement() dan createTextNode() untuk mencipta contoh pilihan dan ambil nilai teks sebagai pilihan. Selepas itu, panggil kaedah appendChild() dan hantar nilai teks sebagai pilihan kemudian, tambahkan pilihan ini pada permulaan senarai pilih menggunakan “ insertBefore() ” kaedah dengan elemen pilih:
functioninsertOption ( ){
var pilih = dokumen. getElementById ( 'jatuh turun' ) ,
textValue = dokumen. getElementById ( 'txt' ) . nilai ,
newOption = dokumen. createElement ( 'Pilihan' ) ,
newOptionValue = dokumen. createTextNode ( textValue ) ;
newOption. appendChild ( newOptionValue ) ;
pilih. masukkanSebelum ( newOption, pilih. anak pertama ) ;
}
Seperti yang anda dapat lihat bahawa output menunjukkan bahawa pilihan baharu dari medan teks ditambahkan pada permulaan menu lungsur:
Kami telah menyusun semua penyelesaian yang mungkin untuk menambah pilihan daripada teks input kepada teg pilih.
Kesimpulan
Untuk menambah pilihan daripada teks input pada teg pilih menggunakan JavaScript, anda boleh menggunakan kaedah terbina dalam JavaScript, termasuk kaedah add() atau kaedah appendChild(). Anda boleh menambah pilihan dalam teg pilih pada permulaan senarai serta penghujung senarai. Dalam tutorial ini, kami telah mentakrifkan prosedur untuk menambah pilihan daripada teks input kepada teg pilih menggunakan JavaScript dengan contoh terperinci.