Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Option Menggunakan Perulangan For Pada Javascript.
Perulangan For digunakan untuk mengulang sebuah program yang telah kita buat. Nah, sekarang kita akan mencoba mengaplikasikan perulangan for untuk membuat option. Struktur perulangan for memiliki 4 perintah yaitu:
- Kondisi awal
- Kondisi akhir
- Baris program yang akan di ulang
- Dan kenaikan dalam setiap perulangan.
Ok, langsung saja saya akan memberi contoh pengaplikasian for dengan Cara Membuat Option Menggunakan Perulangan For Pada Javascript.
– Pertama teman-teman buat struktur dasar HTML-nya dulu bawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> |
Jangan lupa save dengan nama index.html
– Kedua teman-teman ketikan tag <div> dan beri class seperti kode HTML di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Option</title> <style type="text/css"> /*memberi jarak antara tulisan dengan option*/ select{margin-left:10px;} </style> </head> <body> <div id="myDiv">Paket Kursus</div> </body> </html> |
– Ketiga teman-teman ketikan kode javascriptnya seperti kode di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
</body> //di simpan di bawah body <script type="text/javascript"> var myDiv = document.getElementById("myDiv"); //Membuat nama paket kursus untuk di masukan kedalam pilihan menggunakan array var array = ["Kursus Web Programming","Kursus Web Design","Kursus Web Master","Kursus Graphic Design"]; //Membuat daftar pilih var selectList = document.createElement("select"); selectList.setAttribute("id", "mySelect"); myDiv.appendChild(selectList); //Membuat daftar paket kursus yang akan di pilih menggunakan perulangan for, //perulangan for di gunakan untuk mengulang nilai array yang telah kita masukan di atas for (var i = 0; i < array.length; i++) { var option = document.createElement("option"); option.setAttribute("value", array[i]); option.text = array[i]; selectList.appendChild(option); } </script> |
Di atas saya sudah sisipkan commenting untuk penjelasannya
– Hasilnya akan menjadi seperti ini:
– Dan pada saat kita klik optionnya maka akan tampil pilihan paket yang kita input seperti gambar di bawah ini:
Bagaimana teman-teman mudahkan Cara Membuat Option Menggunakan Perulangan For Pada Javascript.
Sekian tutorial saya untuk kali ini. Sehat selalu ya teman-teman, selamat mencoba.