Cara menggunakan javascript open dropdown

Question

Artikel UBB

Universitas Bangka Belitung's Article
01 Agustus 2008 | 06:48:22 WIB

Table of Contents Show

Artikel UBB
Cara Membuat Dropdown Menu untuk Tampilan Blog Website Internet
Atribut Tag Select
Cara Membuat Menu Dropdown Menggunakan Tag Select
Cara Menghias Elemen Select
HTML apa yang benar untuk membuat daftar drop down?
Apa fungsi dari menu drop down?

Ditulis Oleh : Admin

Aliran informasi dari komunitas blog-blog yang online ini di internet setiap hari semakin meningkat, orang-orang mulai menyadari akan besar manfaat yang akan diraih dari kehadiran blog yang mereka miliki. Tidak sekedar menuangkan gagasan, ide, pemikiran aaupun kreasi pribadi untuk dipublikasikan kepada pembacanya, tetapi lebih dari itu ternyata blog bisa dijadikan sebagai sumber penghasilan tambahan bagi yang serius menggelutinya. Untuk itulah karena semakin hari minat terhadap pemanfaatan blog ni semakin meningkat, kami mengangkat tulisan ini semoga dapat dijadikan tambahan informasi yang berguna.

Apa sih dropdown menu itu?

Dropdown menu itu seperti ini :

Dengan dropdown menu kita bisa menghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll. Gimana? Mau mencobanya? caranya : Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

<option value="0" selected>Arsip Blog</option>

<option value="Links 1">Text 1</option>

<option value="Links 2">Text 2</option>

</select>

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.

Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

<option value="0" selected>Arsip Blog</option>

<option value="https://www.ubb.ac.id/menulengkap.php?nomor_urut=111"> Cara Membuat Menu Vertical dan Menu Horizontal pada Blog </option>

<option value="https://www.ubb.ac.id/menulengkap.php?nomor_urut=121"> Cara membuat Read More ? Baca Selengkapnya pada Blog</option>

</select>

Maka hasilnya akan seperti ini :

untuk menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Links 2">Text 2</option>

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb. Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.

Cara mambuatnya seperti diatas tapi ganti kode berikut

ganti dengan kode ini :

hasilnya akan seperti ini :

Trik dan tips yang berhubungan :

Kode-kode Warna untuk HTML

Di dalam dunia web/blog, warna itu sangat penting dan sangat berpengaruh terhadap penampilan web/blog. Warna-warna biasanya digunakan untuk background, text, links, table dll. Kalau kombinasi warna pada web/blog kita tidak sesuai, atau tidak enak dipandang mata mata, maka hal itu akan membuat pengungjung web/blog kita menjadi kurang nyaman, dan kemungkinan akan malas untuk mengunjungi blog kita lagi. Tapi karena untuk untuk membuat warna-warna ini harus menggunakan kode-kode warna, maka bagi yang tidak begitu mahir tentang html akan kesulitan untuk mendapatkan kode-kode warna ini.

Oleh karena itulah dibawah ini dibuat Chart HTML Kode Warna bagi yang membutuhkan kode-kode warna. Cara penggunaannya cukup mudah, tinggal klik warna yang dipilih, maka kode warnanya akan tampil di kotak "kode warna:".

Source :

Iam trying to show the dropdown option when javascript function is called. but eventually iam not succeed on this. need help Here is my code:

...

i used triggered function to open the dropdown but it doesn't work.

Kamu dapat menggunakan tag select HTML untuk membuat menu drop-down supaya pengguna dapat memilih nilai yang mereka inginkan. Elemen ini adalah fitur yang berguna untuk mengumpulkan data untuk dikirim ke server.

Tag select biasanya digunakan bersamaan dengan elemen form; pilihan-pilihan yang dapat dipilih dibuat dalam tag lain,

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

0. Elemen ini juga bisa berdiri sendiri, tetapi masih terkait dengan sebuah form melalui salah satu atribut spesialnya,

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

1.

Dalam tutorial ini, saya akan menjelaskan cara membuat menu dropdown dengan tag select, jadi kamu bisa mulai menggunakannya untuk mengumpulkan data dalam proyek koding kamu. Saya juga akan membahas tentang cara menghias tag select karena ia terkenal sebagai elemen yang sulit untuk dihias.

Atribut Tag Select

Sebelum saya menjelaskan lebih lanjut tentang cara membuat menu dropdown menggunakan tag select, kita harus membicarakan tentang atribut-atribut yang diterima tag select.

Ini adalah atribut-atributnya:

nama: Kamu harus menyediakan nama untuk semua kontrol form karena ini akan digunakan untuk mereferensikan datanya setelah ia dikirimkan ke server.
multiple: Atribut ini mengizinkan pengguna untuk memilih lebih dari satu pilihan dari menu dropdown.
required: Ini biasanya digunakan untuk validasi. Dengan atribut ini, form tidak akan dikirim kecuali pengguna memilih setidaknya satu pilihan dari dropdown.
disabled: Atribut ini memblokir interaksi pengguna dengan pilihan-pilihannya.
size: Diekspresikan dengan angka, atribut size digunakan untuk menetapkan berapa banyak pilihan yang akan ditampilkan dalam suatu waktu.
autofocus: Atribut ini digunakan pada semua input form, select juga termasuk, untuk menyatakan bahwa halaman harus fokus ke input saat halamannya dimuat.

Untuk membuat menu dropdown dengan tag select, pertama-tama kamu memerlukan sebuah elemen form. Hal ini karena kamu juga harus memiliki tombol submit/kirim di dalamnya (elemen form) supaya kamu bisa mengirimkan datanya ke server.

<form action="#">
      <label for="bhs">Bahasa</label>
      <select name="bahasa" id="bhs">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="c++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Kirim" />
</form>

Saya sudah menambahkan beberapa CSS sederhana untuk membuat dropdown dan tombolnya di tengah, dan membuat latar belakang bodynya menjadi abu-abu:

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

Untuk membuatnya lebih jelas dan gampang diakses, kamu juga bisa menempelkan kotak select ke elemen label, sehingga ia akan difokuskan ketika tulisan label diklik. Kamu bisa melakukannya dengan kode ini:

<form action="#">
      <label for="bhs">Bahasa</label>
      <select name="bahasa" id="bhs">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="c++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Kirim" />
</form>

Saya menaruh simbol angka (#) sebagai nilai atribut action supaya kamu tidak mendapatkan 404 saat kamu mengeklik tombol submit.

Tapi, sekarang kita harus membuat sedikit perubahan pada CSS:

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

Akhirnya, inilah hasilnya:

Ini belum beres. Salah satu pilihan dropdown muncul secara default dan akan terpilih jika pengguna mengeklik tombol submit langsung saat mereka sampai di halaman ini.

Hal ini bukanlah user experience (pengalaman pengguna) yang baik. Kamu bisa menyingkirkannya dengan membuat koding "pilih bahasa" sebagai pilihan pertama pada dropdown.

<form action="#">
      <label for="bhs">Bahasa</label>
      <select name="bahasa" id="bhs">
        <option value="pilih">Pilih bahasa</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="c++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Kirim" />
</form>

Saat pengguna mengeklik kotak select untuk memilih pilihan mereka, dropdownnya juga menutupi tombol kirim – hal lain yang memengaruhi user experience secara negatif.

Kamu bisa mengubah situasi ini dengan 'atribut size', yang akan menunjukkan beberapa pilihan saja secara default dan menampilkan guliran untuk pilihan-pilihan lain pada dropdown.

Ini juga mengizinkanmu untuk menyingkirkan pilihan pertama yang merupakan dumi, karena beberapa pilihan akan ditampilkan kepada pengguna secara otomatis.

<form action="#">
      <label for="bhs">Bahasa</label>
      <select name="bahasa" id="bhs" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="c++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Kirim" />
</form>

Dengan atribut

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

2, kamu bisa memperbolehkan pengguna untuk memilih lebih dari satu pilihan dari dropdown.

<form action="#">
      <label for="bhs">Bahasa</label>
      <select name="bahasa" id="bhs" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="c++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Kirim" />
</form>

Ini membuat 4 pilihan tampak secara default. Untuk memilih beberapa pilihan, pengguna harus menekan tombol shift atau ctrl, kemudian memilih menggunakan mouse.

Bukan hanya ini saja yang bisa kamu lakukan dengan tag

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

0. Kamu juga bisa membuat kotak select multilapis menggunakan elemen

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

4 di dalam tag

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

5.

Kamu bisa mengubah dropdown yang sudah kamu buat menjadi kotak select multilapis seperti ini:

<form action="#">
      <label for="bhs">Bahasa</label>
      <select name="bahasa" id="bhs">
        <optgroup label="pilihan-pertama">
          <option value="pilih">Pilih bahasa</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="pilihan-kedua">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="c++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Kirim" />
</form>

Cara Menghias Elemen Select

Menghias elemen select sering kali memusingkan. Ia juga dirender secara inkonsisten dalam browser-browser. Akan tetapi, kamu selalu bisa mencoba yang berikut ini:

<form action="#">
      <label for="bhs">Bahasa</label>
      <select name="bahasa" id="bhs">
        <option value="pilih">Pilih bahasa</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="c++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Kirim" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

Dalam potongan kode CSS di atas, saya mengubah tampilan tulisan dalam kotak selectnya dengan atribut:

keluarga font kursif dan warna putih,
outline 0 untuk menghapus garis outline yang jelek saat ia difokuskan,
latar belakang hijau,
border dengan tebal 1 piksel berwarna merah tua,
border-radius 4 piksel supaya mendapatkan border yang agak melengkung di semua sisi,
padding 4 piksel untuk membuat sedikit ruang.

Kotak select sekarang sudah lebih bagus:

Kesimpulan

Tag select sangat berguna saat kamu membuat dropdown dan daftar kombo di HTML. Dia seperti tombol radio dan checkbox dalam satu paket.

Ingatlah bahwa dengan tombol radio, kamu hanya bisa memilih satu pilihan dari daftar – tapi dengan checkbox, kamu bisa memilih beberapa pilihan. Select lebih fleksibel, karena kamu bisa mengaturnya supaya dia menerima hanya satu pilihan atau lebih dari satu pilihan.

Satu kekurangan dari tag select adalah ia agak susah untuk dihias. Salah satu solusi yang cukup baik adalah dengan menggunakan library CSS yang menyediakan kelas-kelas utilitas yang bagus untuk menghias form beserta dengan elemen selectnya.

Saya harap tutorial ini telah membuat kamu lebih familier dengan tag select supaya kamu bisa mulai menggunakannya dalam proyek-proyekmu.

Terima kasih sudah membaca dan tetaplah mengoding.

Author: Kolade Chris (English)

Web developer and technical writer focusing on frontend technologies.

Translator: Kevin Matthew

HTML apa yang benar untuk membuat daftar drop down?

Perhatikan pada file menu.html di atas, untuk membuat menu dropdown, element HTML yang kita gunakan adalah element <ul> <li> .

Anda pasti tidak asing dengan istilah dropdown menu. Dropdown menu merupakan sebuah elemen kontrol grafis yang memunculkan daftar agar pengguna dapat memilih salah satu dari daftar menu yang ada.

kode javascript