Javascript menambahkan baris dengan daftar drop-down

Untuk menambahkan daftar tarik-turun secara dinamis, Anda perlu membuat elemen HTML <select>, labelnya, dan secara opsional tag <br>

Dalam JavaScript murni, Anda dapat menggunakan dokumen. createElement() metode untuk secara terprogram membuat daftar dropdown. Kemudian Anda dapat memanggil metode appendChild() Node atau jQuery. append() metode untuk menambahkan daftar dropdown di akhir wadah.

1. Menggunakan solusi JavaScript

JS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

dokumen. getElementById('hasilkan').klik = fungsi() {

    var nilai = ["dog", "cat", "parrot", "rabbit"];

    var pilih = dokumen.buat Elemen("pilih");

    pilih. nama = "hewan peliharaan";

    pilih. adalah = "pets"

    untuk (const val of values)

    {

        var opsi = dokumen.buatElemen("opsi");

        opsi. nilai = nilai;

        opsi. teks = val. karakter(0). toUpperCase() + val . .irisan(1);

        pilih. appendChild(opsi);

    }

    var label = dokumen.buatElemen("label");

    label. innerHTML = "Pilih hewan peliharaan Anda. "

    label. htmlUntuk = "hewan peliharaan";

    dokumen. getElementById("wadah").appendChild(label). appendChild(pilih);

}

HTML

1

2

3

4

5

6

7

8

9

Edit di JSFiddle

2. Menggunakan solusi jQuery

JS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

$(dokumen). siap(fungsi() {

    $('#generate').klik(fungsi() {

        var nilai = ["dog", "cat", "parrot", "rabbit"];

        $('#container')

         . tambahkan(

            $(dokumen. buatElemen('label')).penyangga({

                untuk. 'hewan peliharaan'

            }). html('Pilih hewan peliharaan Anda. ')

         )

         . tambahkan(

            $(dokumen. buat Elemen('pilih')).penyangga({

                id. 'hewan peliharaan',

                nama. 'hewan peliharaan'

            })

         )

        untuk (const val of values) {

            $('#pets').tambahkan($(dokumen . .buatElemen('opsi')).penyangga({

                nilai. val,

                teks. val. karakter(0). toUpperCase() + val . .irisan(1)

            }))

        }

    })

});

HTML

1

2

3

4

5

6

7

8

9

Edit di JSFiddle

 
Atau, Anda dapat melakukan suka

JS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

$(dokumen). siap(fungsi() {

    $('#generate').klik(fungsi() {

        var nilai = ["dog", "cat", "parrot", "rabbit"];

    var pilih = $('').penyangga('id', 'pets')

                    . penyangga('nama', 'pets');

 

    $(nilai).masing-masing(fungsi() {

        pilih. tambahkan($(")

         . prop('nilai', this)

         . teks(ini. karakter(0). toUpperCase() + ini . .irisan(1)));

    });

 

    var label = $("").penyangga('untuk', 'pets')

                    . teks("Pilih hewan peliharaan Anda. ");

 

    var br = $("
");

 

    $('#container').tambahkan(label). tambahkan(pilih). tambahkan(br);

    })

});

HTML

1

2

3

4

5

6

7

8

9

    

    

id="wadah">

    

    

    id="hasilkan">Generate

    

    

Edit di JSFiddle

Itu semua tentang membuat daftar drop-down secara dinamis di JavaScript dan jQuery

Bagaimana cara menambahkan item secara dinamis ke Dropdownlist 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 Anda menambahkan baris dropdown dalam HTML?

Gunakan elemen apa pun untuk membuka menu tarik-turun, mis. g. elemen , atau

. Gunakan elemen wadah (seperti

) untuk membuat menu tarik-turun dan tambahkan tautan tarik-turun di dalamnya. Bungkus elemen

di sekitar tombol dan

untuk memposisikan menu dropdown dengan benar menggunakan CSS. Use a container element (like

) to create the dropdown menu and add the dropdown links inside it. Wrap a

element around the button and the

to position the dropdown menu correctly with CSS.

Bagaimana cara menambahkan dropdown di sel tabel HTML secara dinamis?

Untuk menambahkan daftar dropdown secara dinamis, Anda perlu membuat elemen HTML . In pure JavaScript, you can use the document. createElement() method to programmatically create a dropdown list. Then you can call the Node's appendChild() method or jQuery's .