Bagaimanakah saya boleh menukar senarai tidak tertib kepada lungsur pilih menggunakan jQuery?

Menukar Senarai Tidak Tertib kepada Pilih Jatuh Turun dengan jQuery

Anda mempunyai senarai tidak tertib (UL) yang diformatkan seperti berikut:

• one
• two
• three
• four
• five
• six
• seven

Matlamat anda adalah untuk menukarnya menjadi menu lungsur () dengan format berikut:

<select>
    <option value="one.html" target="_blank">one</option>
    <option value="two.html" target="_blank">two</option>
    <option value="three.html" target="_blank">three</option>
    <option value="four.html" target="_blank">four</option>
    <option value="five.html" target="_blank">five</option>
    <option value="six.html" target="_blank">six</option>
    <option value="seven.html" target="_blank">seven</option>
</select>

Penyelesaian jQuery:

Untuk mencapai matlamat ini penukaran, anda boleh menggunakan kod jQuery berikut:

$(function() {
    $('ul.selectdropdown').each(function() {
        var $select = $('<select>');

        $(this).find('a').each(function() {
            var $option = $('<option>');
            $option.attr('value', $(this).attr('href')).html($(this).html());
            $select.append($option);
        });

        $(this).replaceWith($select);
    });
});</option></select>

Penjelasan:

• Kod membungkus penukaran dalam $(function() { . .. }); blok untuk memastikan ia berjalan sebaik sahaja halaman dimuatkan.
• Ia melelang ke atas semua elemen UL dengan kelas "select dropdown."
• Untuk setiap UL, ia mencipta elemen.
• Ia mengulangi semua elemen dalam UL.
• Untuk setiap , ia mencipta elemen dengan href sebagai nilai dan teks dalam sebagai HTML.
• Ia menambahkan ke elemen.
• Akhir sekali, ia menggantikan UL dengan elemen.

Kod ini akan menukar senarai tidak tersusun anda kepada senarai lungsur pilihan yang digayakan dengan baik.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menukar senarai tidak tertib kepada lungsur pilih menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!