Home Coding Javascript

Cara Membuat Select Option dengan Javascript

Web

Image

Elemen Select Option adalah elemen yang diperuntukkan untuk pengguna dapat memilih sebuah elemen diantara beberapa pilihan.

Untuk dapat lebih mudah dimengerti, pada kesempatan kali ini digunakan contoh dimana sebuah elemen berbentuk kotak yang akan diubah warna latar belakangnya dengan menggunakan select option.

Membuat Elemen Kotak

Hal yang pertama dilakukan adalah membuat elemen kotaknya. Berikut adalah penulisan program pada HTML

  <div id="kotak" class="contoh">
    <p>Pilih Warna</p>
  </div>

Berikut adalah penulisan program pada CSS untuk elemen kotak ini.

  .contoh{
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: lightgray;    
  }

Membuat Elemen Select Option dengan HTML

Setelah membuat elemen kotak, selanjutnya adalah elemen Select Option. Hal yang pertama dilakukan adalah membuat elemen select. Selanjutnya adalah membuat elemen option dimana elemen ini ditempatkan didalam elemen select. Seperti pada contoh penulisan program berikut.

  <select id="select_1">
    <option value="a">Merah</option>
    <option value="b">Hijau</option>
    <option value="c">Kuning</option>
    <option value="d">Biru</option>
  </select>

Untuk dapat dengan mudah diakses dengan javascript, elemen select dilengkapi dengan property id. Pada contoh diatas, elemen ditandai dengan nama id select_1

Elemen option adalah elemen yang nantinya akan dipilih. Masing-masing elemen option memiliki value-nya masing-masing. Value ini yang membedakan satu elemen option dengan elemen option yang lain.

Di dalam elemen option ini terdapat tulisan yang akan ditampilkan kepada pengguna.

Tombol Perintah

Menekan tombol adalah salah satu cara memulai sebuah fungsi. Berikut ini adalah contoh penulisan program elemen tombol pada HTML.

  <button onclick="ubah()">Ubah</button>

Pada saat tombol ditekan, akan dijalankan fungsi dengan nama fungsi ubah().

Deklarasi

Setelah elemen kotak, elemen select option dan tombol pemicu telah dibuat, maka selanjutnya adalah membuat fungsi yang akan dijalankan apabila tombol ditekan.

Sebelum menuliskan fungsi, elemen pada HTML dideklarasikan terlebih dahulu sehingga dapat diatur dengan menggunakan javascript. Berikut baris programnya.

  var id_select_1 = document.getElementById("select_1");   
  var id_kotak = document.getElementById("kotak");

Fungsi

Setelah semua telah dideklarasikan, selanjutnya adalah membuat fungsi yang akan bekerja pada saat tombol ditekan.

Pada saat membuat tombol pada bagian sebelumnya, telah disebutkan bahwa tombol akan menjalankan fungsi dengan nama ubah(). Berikut adalah fungsi tersebut dan perintah yang terdapat didalamnya.

  function ubah(){
    if(id_select_1.value == "a") id_kotak.style.backgroundColor = "#f00";
    if(id_select_1.value == "b") id_kotak.style.backgroundColor = "#0f0";
    if(id_select_1.value == "c") id_kotak.style.backgroundColor = "#ff0";
    if(id_select_1.value == "d") id_kotak.style.backgroundColor = "#00f";
  }

Fungsi diatas akan memeriksa value pada elemen select option. Jika value berupa "a" yang mana berarti warna yang dipilih adalah Merah maka latar belakang elemen kotak akan berubah menjadi warna merah. Dan seterusnya

Hasil

Berikut tampilan kotak, select option dan tombol pemicunya yang telah dibuat.

Pilih Warna

Lihat juga: Cara Membangkitkan Nilai Random dengan Javascript

Sekian, Semoga bermanfaat

Daftar Lengkap