Cara membuat senarai juntai bawah yang mengandungi nilai tatasusunan menggunakan JavaScript

Gambaran Keseluruhan

Untuk mendapatkan pilihan dalam senarai juntai bawah tanpa mengganggu bahagian hadapan halaman web, anda boleh menggunakan tatasusunan. Seperti dalam tatasusunan, kita boleh menyimpan sebarang bilangan pilihan atau nilai. Jadi daripada meletakkan nilai ini terus ke dalam bahagian HTML kod dalam teg pilih, kita boleh menjadikannya daripada tatasusunan, menjadikannya mudah untuk menambah lebih banyak nilai tanpa mengganggu antara muka pengguna (UI) halaman.

Kaedah

Ini adalah teknik yang sangat mudah dengan menggunakan teknik ini, kami boleh dengan mudah memberikan nilai pilihan ke dalam senarai kami. Dengan menggunakan tatasusunan kita boleh menyimpan semua nilai jenis String dalam satu pembolehubah yang akan mengurangkan kerumitan ruang. Kami juga mempunyai banyak fungsi seperti "for", "foreach", "map()" dengan menggunakan fungsi ini, kita boleh mengulangi tatasusunan dan boleh menghasilkan nilai.

Tatabahasa

Sintaks untuk membuat senarai juntai bawah ialah -

<select name="" id="">
   <option value=""></option>
   <option value=""></option>
</select>

Algoritma

Langkah 1 −Buat templat kod HTML. Untuk membuat senarai lungsur dalam HTML, kami menggunakan teg pilih untuk membuat senarai lungsur dan teg pilihan untuk membuat senarai.

<select>
   <option></option>
   <option></option>
</select>

Langkah 2 − Mulakan tatasusunan yang mengandungi pilihan sebagai elemen dan cipta pembolehubah jenis String kosong.

var arr = ["Courses here","Frontend Training","Backend Training","Java Training","Ethical Hacking"];

Langkah 3 − Sekarang gunakan kaedah pemetaan tatasusunan, yang memetakan nilai dalam tatasusunan ke senarai pilihan senarai juntai bawah. Gunakan teknik penggabungan untuk menyambungkan pilihan kepada senarai juntai bawah.

arr.map((op,i)=>{
   options+=`<option value="${op}" id="${i}" style="border-radius: 5px;"">${op}</option>`
})

Langkah 4 − Kini pembolehubah pilihan mengandungi senarai pilihan dalam tatasusunan. Memaparkan nilai yang diberikan daripada tatasusunan ke dalam senarai juntai bawah.

document.getElementById("arrayDropdown").innerHTML=options;

Langkah 5−Semua pilihan yang diberikan akan muncul dalam senarai juntai bawah dan tersedia untuk digunakan.

Contoh

Dalam contoh ini, kami memberikan nilai pilihan daripada tatasusunan. Menggunakan fungsi map(), kami mengulangi tatasusunan menggunakan penanda pilihan dan menggabungkannya dengan pembolehubah jenis String. Kami menggunakan kaedah innerHTML() untuk memaparkan output pada teg pilih.

   


   
Dropdown list with array rendered options
   
   <script>
      var arr = [&quot;Courses here&quot;,&quot;Frontend Training&quot;,&quot;Backend Training&quot;,&quot;Java Training&quot;,&quot;Ethical Hacking&quot;];
      var options="";
      arr.map((op,i)=>{
         options+=`<option value="${op}" id="${i}" style="border-radius: 5px;"">${op}</option>`
      })
      document.getElementById(&quot;arrayDropdown&quot;).innerHTML=options;
   </script>

Imej di bawah menunjukkan output contoh di atas. Ini hanya untuk menunjukkan kepada kami cara untuk membuat tatasusunan ke dalam HTML sebagai senarai pilihan. Jadi jika anda ingin menjadikannya lebih interaktif, kita boleh menggunakan komponen bootstrap, yang menjadikan penggayaan lebih cantik.

Kesimpulan

Kaedah ini ialah cara terbaik untuk membentangkan nilai pilihan senarai lungsur. Kelebihan utama ini ialah ia bersifat dinamik, yang menjadikannya mudah untuk memanipulasi tatasusunan, bermakna kita boleh mengemas kini, menambah atau mengalih keluar pilihan dengan mudah daripada tatasusunan. Memandangkan kami telah mencipta senarai pilihan, ia mengikut tegas Jangan Ulangi Sendiri (D-R-Y). Ia berfungsi sebagai komponen dan boleh dipaparkan di mana-mana sahaja pada halaman web, hanya memerlukan beberapa pembangunan antara muka pengguna (UI).

Atas ialah kandungan terperinci Cara membuat senarai juntai bawah yang mengandungi nilai tatasusunan menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!