Tutorial ini akan menentukan prosedur untuk menambahkan opsi dari teks input ke tag pilih menggunakan JavaScript.
Bagaimana Menambahkan Opsi untuk Memilih Tag Dari Teks Input Menggunakan JavaScript?
Untuk menambahkan opsi dari teks input ke tag pilihan menggunakan JavaScript, Anda dapat menggunakan metode yang berbeda, seperti:
Mari kita telusuri setiap metode satu per satu!
Metode 1: Tambahkan Opsi untuk Memilih Tag Dari Teks Input Menggunakan Metode add() dengan Konstruktor Opsi
Untuk menambahkan opsi dari teks input dalam tag pilih, gunakan tombol “ menambahkan() ” metode dengan “ Pilihan ” Konstruktor. Metode add() digunakan untuk menambahkan elemen ke opsi “ HTMLPilihElemen ” juga dikenal sebagai tag
Sintaksis
Ikuti sintaks yang disediakan untuk menggunakan metode add() untuk menambahkan opsi dalam tag pilih:
menambahkan ( opsi, opsi yang ada ) ;Di sini, “ pilihan ” mewakili opsi baru yang akan ditambahkan sebagai pengganti “ Opsi yang ada ”.
Contoh
Kami akan membuat bidang input, menu tarik-turun menggunakan
< pilih identitas = 'pilihan' >
< nilai opsi = 'c' > C pilihan >
Pilih >
< br >< br >
< ID tombol = 'tambah btn' klik = 'masukkan Opsi()' > Tambahkan Opsi tombol >
Dalam file JS, tentukan fungsi bernama “ opsi sisipkan() ” lalu akses tombol, kotak teks, dan elemen pilih dengan id yang ditetapkan menggunakan tombol “ kueriPemilih() ' metode. Kemudian, buat instance opsi menggunakan konstruktor Option, dan panggil metode add() dengan meneruskan opsi yang ada dan opsi baru yang perlu ditambahkan di akhir daftar:
functioninsertOption ( ){
konstan tambahkanBtn = dokumen. kueriPemilih ( '#addbtn' ) ;
konstan kotak daftar = dokumen. kueriPemilih ( '#pilihan' ) ;
konstan tarik-turun = dokumen. kueriPemilih ( '#txt' ) ;
konstan pilihan = baru Pilihan ( tarik-turun. nilai , tarik-turun. nilai ) ;
kotak daftar. menambahkan ( pilihan, tidak terdefinisi ) ;
tarik-turun. nilai = '' ;
tarik-turun. fokus ( ) ;
}
Outputnya menunjukkan bahwa opsi baru dari bidang teks ditambahkan di akhir menu tarik-turun:
Catatan: Anda dapat menggunakan metode ini untuk menambahkan opsi di awal tag pilih dengan menambahkan nilai opsi yang ada sebagai parameter kedua alih-alih tidak ditentukan. Ini akan menambahkan opsi baru sebelum yang sudah ada.
Mari beralih ke metode lainnya!
Metode 2: Tambahkan Opsi untuk Memilih Tag Dari Teks Input Menggunakan createElement() Dengan Metode appendChild()
Ada pendekatan lain yang dapat digunakan untuk membuat elemen baru menggunakan ' buatElemen() ” metode dengan “ tambahkanAnak() ' metode. Dengan menggunakan metodologi ini, kami akan menambahkan opsi di awal tag pilih.
Sintaksis
Gunakan sintaks berikut untuk menambahkan opsi dalam tag pilih dari teks input menggunakan metode appendChild():
tambahkanAnak ( NilaiOpsi baru ) ;Contoh
Di sini, kita akan membuat daftar dropdown dengan menambahkan dua opsi “ C ' dan ' C++ ”, kolom input dan tombol yang akan memanggil fungsi JavaScript yang ditentukan pengguna bernama “ opsi sisipkan() ” ketika acara onclick-nya dipicu:
< tipe masukan = 'teks' Indo = 'txt' tempat penampung = 'Masukkan teks untuk menambahkan opsi' >< pilih identitas = 'turun turun' >
< pilihan > C pilihan >
< pilihan > C ++ pilihan >
Pilih >
< br >< br >
< tombol onclick = 'masukkan Opsi();' > Tambahkan Opsi tombol >
Dalam sebuah fungsi bernama “ opsi sisipkan() ”, pertama-tama akses elemen pilih dan bidang teks menggunakan id yang ditetapkan, lalu panggil metode createElement() dan createTextNode() untuk membuat instance opsi dan mengambil nilai teks sebagai opsi. Setelah itu, panggil metode appendChild() dan berikan nilai teks sebagai opsi lalu, tambahkan opsi ini di awal daftar pilih menggunakan “ masukkanSebelum() ” metode dengan elemen pilih:
functioninsertOption ( ){
pilih var = dokumen. getElementById ( 'turun turun' ) ,
teksNilai = dokumen. getElementById ( 'txt' ) . nilai ,
opsi baru = dokumen. buatElemen ( 'Pilihan' ) ,
NilaiOpsi baru = dokumen. buatTeksNode ( teksNilai ) ;
opsi baru. tambahkanAnak ( NilaiOpsi baru ) ;
Pilih. masukkanSebelum ( opsi baru, pilih. anak pertama ) ;
}
Seperti yang Anda lihat bahwa output menunjukkan bahwa opsi baru dari bidang teks ditambahkan di awal menu tarik-turun:
Kami telah mengumpulkan semua solusi yang mungkin untuk menambahkan opsi dari teks input ke tag pilih.
Kesimpulan
Untuk menambahkan opsi dari teks input ke tag pilihan menggunakan JavaScript, Anda dapat menggunakan metode bawaan JavaScript, termasuk metode add() atau metode appendChild(). Anda dapat menambahkan opsi di tag pilih di awal daftar serta di akhir daftar. Dalam tutorial ini, kami telah mendefinisikan prosedur untuk menambahkan opsi dari teks input ke tag pilih menggunakan JavaScript dengan contoh detail.