Menambahkan dropdown secara dinamis pada klik tombol javascript

Question

Beralih overlay kontekstual untuk menampilkan daftar tautan dan lainnya dengan plugin dropdown Bootstrap

Table of Contents Show

Aksesibilitas
Tombol tunggal
tombol Pisah
Dengan disabilitas
Jangka pembagi garis
Opsi tarik-turun
Melalui atribut data
Melalui JavaScript
Bagaimana cara menambahkan daftar drop-down secara dinamis di JavaScript?
Bagaimana cara menambahkan opsi pilih secara dinamis dalam JavaScript?
Bagaimana cara menambahkan item dinamis ke daftar drop-down?
Bagaimana cara menambahkan item daftar secara dinamis dalam JavaScript?

Ringkasan

Dropdown dapat dialihkan, hamparan kontekstual untuk menampilkan daftar tautan dan lainnya. Mereka dibuat interaktif dengan plugin JavaScript dropdown Bootstrap yang disertakan. Mereka dialihkan dengan mengklik, bukan dengan melayang;

Dropdown dibangun di perpustakaan pihak ketiga, Popper. js, yang menyediakan pemosisian dinamis dan deteksi viewport. Pastikan untuk memasukkan popper. min. js sebelum JavaScript Bootstrap atau gunakan



  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link

2 /



  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link

3 yang berisi Popper. js. Popper. js tidak digunakan untuk memposisikan dropdown di navbar meskipun karena pemosisian dinamis tidak diperlukan

Jika Anda membuat JavaScript kami dari sumber, itu

Aksesibilitas

Standar WAI ARIA mendefinisikan , tetapi ini khusus untuk menu mirip aplikasi yang memicu tindakan atau fungsi. Menu ARIA hanya dapat berisi item menu, item menu kotak centang, item menu tombol radio, grup tombol radio, dan submenu

Dropdown Bootstrap, di sisi lain, dirancang untuk menjadi umum dan berlaku untuk berbagai situasi dan struktur markup. Misalnya, dimungkinkan untuk membuat dropdown yang berisi input tambahan dan kontrol formulir, seperti kolom pencarian atau formulir login. Untuk alasan ini, Bootstrap tidak mengharapkan (atau menambahkan secara otomatis) salah satu atribut



  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link

6 dan



  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link

7 yang diperlukan untuk menu ARIA yang sebenarnya. Penulis harus memasukkan sendiri atribut yang lebih spesifik ini

Namun, Bootstrap menambahkan dukungan bawaan untuk sebagian besar interaksi menu keyboard standar, seperti kemampuan untuk bergerak melalui elemen



  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link

8 individual menggunakan tombol kursor dan menutup menu dengan tombol ESC

Contoh

Bungkus sakelar tarik-turun (tombol atau tautan Anda) dan menu tarik-turun di dalam



  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link

9, atau elemen lain yang menyatakan



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

0. Dropdown dapat dipicu dari



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

_1or elemen agar lebih sesuai dengan potensi kebutuhan Anda

Tombol tunggal

Setiap



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

_2 dapat diubah menjadi toggle dropdown dengan beberapa perubahan markup. Inilah cara Anda dapat membuat mereka bekerja dengan baik

elemen.



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

3



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

_4

Dan dengan



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

1elemen


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

Bagian terbaiknya adalah Anda juga dapat melakukan ini dengan varian tombol apa pun



  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link

tombol Pisah

Demikian pula, buat dropdown tombol terpisah dengan markup yang hampir sama dengan dropdown tombol tunggal, tetapi dengan tambahan



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

6 untuk jarak yang tepat di sekitar caret dropdown

Kami menggunakan kelas tambahan ini untuk mengurangi



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

7 horizontal di kedua sisi tanda sisipan sebesar 25% dan menghapus



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

8 yang ditambahkan untuk tarik-turun tombol reguler. Perubahan ekstra tersebut membuat tanda sisipan tetap berada di tengah tombol pisah dan memberikan area hit dengan ukuran yang lebih tepat di sebelah tombol utama



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

_

Perekat

Dropdown tombol bekerja dengan tombol dari semua ukuran, termasuk tombol dropdown default dan terpisah

Tombol split besar Toggle Dropdown

Tombol split kecil Toggle Dropdown



  
    Large button
  
  

    ...
  


  
    Large split button
  
  
    Toggle Dropdown
  
  

    ...
  




  
    Small button
  
  

    ...
  


  
    Small split button
  
  
    Toggle Dropdown
  
  

    ...

Arah

Dropup

Picu menu tarik-turun di atas elemen dengan menambahkan



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

9 ke elemen induk

Pisahkan dropup Toggle Dropdown



  
    Dropup
  
  

    
  




  
    Split dropup
  
  
    Toggle Dropdown

Dropright

Picu menu tarik-turun di sebelah kanan elemen dengan menambahkan



  
    Large button
  
  

    ...
  


  
    Large split button
  
  
    Toggle Dropdown
  
  

    ...
  




  
    Small button
  
  

    ...
  


  
    Small split button
  
  
    Toggle Dropdown
  
  

    ...

0 ke elemen induk

Pisahkan dropright Toggle Dropright



  
    Dropright
  
  

    
  




  
    Split dropright
  
  
    Toggle Dropright

Dropleft

Picu menu tarik-turun di sebelah kiri elemen dengan menambahkan



  
    Large button
  
  

    ...
  


  
    Large split button
  
  
    Toggle Dropdown
  
  

    ...
  




  
    Small button
  
  

    ...
  


  
    Small split button
  
  
    Toggle Dropdown
  
  

    ...

1 ke elemen induk



  
    Dropleft
  
  

    
  




  

    
      Toggle Dropleft
    
    

      
    
  
  
    Split dropleft

Secara historis, konten menu tarik-turun harus berupa tautan, tetapi tidak demikian halnya dengan v4. Sekarang Anda dapat secara opsional menggunakan elemen di dropdown Anda, bukan hanya



  Action
  
    Toggle Dropdown
  
  

    Action
    Another action
    Something else here
    
    Separated link

1s.



  
    Large button
  
  

    ...
  


  
    Large split button
  
  
    Toggle Dropdown
  
  

    ...
  




  
    Small button
  
  

    ...
  


  
    Small split button
  
  
    Toggle Dropdown
  
  

    ...

3



  
    Large button
  
  

    ...
  


  
    Large split button
  
  
    Toggle Dropdown
  
  

    ...
  




  
    Small button
  
  

    ...
  


  
    Small split button
  
  
    Toggle Dropdown
  
  

    ...

_4

Anda juga dapat membuat item dropdown non-interaktif dengan



  
    Large button
  
  

    ...
  


  
    Large split button
  
  
    Toggle Dropdown
  
  

    ...
  




  
    Small button
  
  

    ...
  


  
    Small split button
  
  
    Toggle Dropdown
  
  

    ...

5. Jangan ragu untuk bergaya lebih jauh dengan CSS khusus atau utilitas teks


  Dropdown item text
  Action
  Another action
  Something else here

Aktif

Tambahkan



  
    Large button
  
  

    ...
  






Large split button
Toggle Dropdown

...



Small button

...



Small split button
Toggle Dropdown

...

_6 ke item di tarik-turun untuk menatanya sebagai aktif


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

0

Dengan disabilitas

Tambahkan



  
    Large button
  
  

    ...
  


  
    Large split button
  
  
    Toggle Dropdown
  
  

    ...
  




  
    Small button
  
  

    ...
  


  
    Small split button
  
  
    Toggle Dropdown
  
  

    ...

_7 ke item di dropdown untuk mengaturnya sebagai dinonaktifkan


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

1

Secara default, menu tarik-turun secara otomatis diposisikan 100% dari atas dan di sepanjang sisi kiri induknya. Tambahkan



  
    Large button
  
  

    ...
  


  
    Large split button
  
  
    Toggle Dropdown
  
  

    ...
  




  
    Small button
  
  

    ...
  


  
    Small split button
  
  
    Toggle Dropdown
  
  

    ...

8 ke



  
    Large button
  
  

    ...
  


  
    Large split button
  
  
    Toggle Dropdown
  
  

    ...
  




  
    Small button
  
  

    ...
  


  
    Small split button
  
  
    Toggle Dropdown
  
  

    ...

9 untuk meratakan kanan menu tarik-turun

Hati-hati. Dropdown diposisikan berkat Popper. js (kecuali jika terdapat di navbar)


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

2

Tambahkan tajuk untuk melabeli bagian tindakan di menu tarik-turun mana pun


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

3

Jangka pembagi garis

Pisahkan kelompok item menu terkait dengan pembagi


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

4

Teks

Tempatkan teks bentuk bebas apa pun di dalam menu tarik-turun dengan teks dan gunakan utilitas spasi. Perhatikan bahwa Anda mungkin memerlukan gaya ukuran tambahan untuk membatasi lebar menu


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

5

Formulir

Letakkan formulir di dalam menu dropdown, atau buat menjadi menu dropdown, dan gunakan utilitas margin atau padding untuk memberikan ruang negatif yang Anda perlukan


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

6


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

7

Opsi tarik-turun

Gunakan



  
    Dropup
  
  

    
  




  
    Split dropup
  
  
    Toggle Dropdown

0 atau



  
    Dropup
  
  

    
  




  
    Split dropup
  
  
    Toggle Dropdown

1 untuk mengubah lokasi dropdown


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

8

Penggunaan

Melalui atribut data atau JavaScript, plugin tarik-turun mengalihkan konten tersembunyi (menu tarik-turun) dengan mengalihkan kelas



  
    Dropup
  
  

    
  






Split dropup
Toggle Dropdown

2 pada item daftar induk. Atribut



  
    Dropup
  
  

    
  




  
    Split dropup
  
  
    Toggle Dropdown

_3 diandalkan untuk menutup menu tarik-turun pada tingkat aplikasi, jadi ada baiknya untuk selalu menggunakannya

Pada perangkat yang mendukung sentuhan, membuka dropdown menambahkan penangan kosong (



  
    Dropup
  
  

    
  




  
    Split dropup
  
  
    Toggle Dropdown

4)



  
    Dropup
  
  

    
  




  
    Split dropup
  
  
    Toggle Dropdown

5 ke turunan langsung dari elemen. Peretasan yang diakui jelek ini diperlukan untuk mengatasi kekhasan dalam delegasi acara iOS, yang jika tidak akan mencegah ketukan di mana pun di luar dropdown memicu kode yang menutup dropdown. Setelah dropdown ditutup, penangan



  
    Dropup
  
  

    
  




  
    Split dropup
  
  
    Toggle Dropdown

5 kosong tambahan ini dihapus

Melalui atribut data

Tambahkan



  
    Dropup
  
  

    
  




  
    Split dropup
  
  
    Toggle Dropdown

_3 ke tautan atau tombol untuk mengalihkan tarik-turun


  
    Dropdown link
  

  

    Action
    Another action
    Something else here

_9

Melalui JavaScript

Panggil dropdown melalui JavaScript



  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link

0



  
    Dropup
  
  

    
  




  
    Split dropup
  
  
    Toggle Dropdown

3 masih diperlukan

Terlepas dari apakah Anda memanggil dropdown Anda melalui JavaScript atau sebagai gantinya menggunakan data-api,



  
    Dropup
  
  

    
  




  
    Split dropup
  
  
    Toggle Dropdown

3 selalu harus ada di elemen pemicu dropdown

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke



  
    Dropright
  
  

    
  




  
    Split dropright
  
  
    Toggle Dropright

0, seperti pada



  
    Dropright
  
  

    
  




  
    Split dropright
  
  
    Toggle Dropright

1

NameTypeDefaultDescriptionoffsetnumber. rangkaian. function0Offset dari dropdown relatif terhadap targetnya. Untuk informasi lebih lanjut lihat Popper. js. flipbooleantrueIzinkan Dropdown untuk membalik jika terjadi tumpang tindih pada elemen referensi. Untuk informasi lebih lanjut lihat Popper. js. string batas. batas batasan element'scrollParent'Overflow dari menu dropdown. Menerima nilai



  
    Dropright
  
  

    
  




  
    Split dropright
  
  
    Toggle Dropright

_2,



  
    Dropright
  
  

    
  




  
    Split dropright
  
  
    Toggle Dropright

3,



  
    Dropright
  
  

    
  




  
    Split dropright
  
  
    Toggle Dropright

4, atau referensi HTMLElement (khusus JavaScript). Untuk informasi lebih lanjut lihat Popper. js. string referensi. element'toggle'Reference elemen dari menu dropdown. Menerima nilai



  
    Dropright
  
  

    
  




  
    Split dropright
  
  
    Toggle Dropright

_5,



  
    Dropright
  
  

    
  






Split dropright
Toggle Dropright

6, atau referensi HTMLElement. Untuk informasi lebih lanjut lihat Popper. js. displaystring'dynamic'Secara default, kami menggunakan Popper. js untuk penentuan posisi dinamis. Nonaktifkan ini dengan



  
    Dropright
  
  

    
  




  
    Split dropright
  
  
    Toggle Dropright

_7

Perhatikan ketika



  
    Dropright
  
  

    
  




  
    Split dropright
  
  
    Toggle Dropright

8 diatur ke nilai apa pun selain



  
    Dropright
  
  

    
  




  
    Split dropright
  
  
    Toggle Dropright

4, gaya



  
    Dropleft
  
  

    
  




  

    
      Toggle Dropleft
    
    

      
    
  
  
    Split dropleft

0 diterapkan ke wadah



  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link

9

Metode

MethodDescription



  
    Dropleft
  
  

    
  




  

    
      Toggle Dropleft
    
    

      
    
  
  
    Split dropleft

2Mengalihkan menu dropdown dari navbar atau navigasi tab tertentu.



  
    Dropleft
  
  

    
  




  

    
      Toggle Dropleft
    
    

      
    
  
  
    Split dropleft

3Memperbarui posisi dropdown elemen.



  
    Dropleft
  
  

    
  




  

    
      Toggle Dropleft
    
    

      
    
  
  
    Split dropleft

_4Menghancurkan dropdown elemen

Acara

Semua event dropdown dipicu pada elemen induk



  
    Large button
  
  

    ...
  


  
    Large split button
  
  
    Toggle Dropdown
  
  

    ...
  




  
    Small button
  
  

    ...
  


  
    Small split button
  
  
    Toggle Dropdown
  
  

    ...

9 dan memiliki properti



  
    Dropleft
  
  

    
  




  

    
      Toggle Dropleft
    
    

      
    
  
  
    Split dropleft

6, yang nilainya adalah elemen toggling anchor. Peristiwa



  
    Dropleft
  
  

    
  




  

    
      Toggle Dropleft
    
    

      
    
  
  
    Split dropleft

7 dan



  
    Dropleft
  
  

    
  




  

    
      Toggle Dropleft
    
    

      
    
  
  
    Split dropleft

8 memiliki properti



  
    Dropleft
  
  

    
  




  

    
      Toggle Dropleft
    
    

      
    
  
  
    Split dropleft

9 (hanya jika jenis peristiwa asli adalah

0) yang berisi Objek Peristiwa untuk peristiwa klik

Bagaimana cara menambahkan daftar drop-down secara dinamis di JavaScript?

Dynamic HTML Select Drop Down List Menggunakan JavaScript .

Deklarasikan HTML Select Wrapper Element

Buat Model Objek JavaScript

Tambahkan Opsi Secara Dinamis Untuk Memilih Elemen

Lampirkan Ubah Acara Untuk Memilih Daftar Turun

Bagaimana cara menambahkan opsi pilih secara dinamis dalam JavaScript?

JavaScript uses the HTMLSelectElement type to represent the element. Use the remove() method of the HTMLSelectElement to remove an option from the

kode javascript

Menambahkan dropdown secara dinamis pada klik tombol javascript

Ringkasan

Aksesibilitas

Contoh

Tombol tunggal

tombol Pisah

Perekat

Arah

Dropup

Dropright

Dropleft

Aktif

Dengan disabilitas

Jangka pembagi garis

Teks

Formulir

Opsi tarik-turun

Penggunaan

Melalui atribut data

Melalui JavaScript

Dropup Split dropup Toggle Dropdown 3 masih diperlukan

Pilihan

Metode

Acara

Bagaimana cara menambahkan daftar drop-down secara dinamis di JavaScript?

Bagaimana cara menambahkan opsi pilih secara dinamis dalam JavaScript?

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social

`Dropup Split dropup Toggle Dropdown`
3 masih diperlukan