Bagaimana untuk Mencipta Dropdown Lantas Tanpa Pangkalan Data?

Susan Sarandon
Lepaskan: 2024-10-21 06:47:02
asal
307 orang telah melayarinya

How to Create Cascading Dropdowns Without a Database?

Memilih Meletak Turun Tanpa Pangkalan Data

Masalah:

Dalam borang, anda memerlukan dua lungsur turun, di mana pilihan dropdown kedua bergantung pada pemilihan dalam dropdown pertama, semuanya tanpa menggunakan pangkalan data.

Penyelesaian:

Walaupun kaedah pangkalan data, berikut ialah cara untuk mencapainya tanpa menggunakan satu:

Penanda HTML:

<code class="html"><select id="primary-dropdown">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

<select id="secondary-dropdown">
    <option value="0" selected>None</option>
</select></code>
Salin selepas log masuk

JavaScript/jQuery:

<code class="javascript">$(document).ready(function() {
    var options = {
        1: ["Smartphone", "Charger"],
        2: ["Basketball", "Volleyball"],
        3: ["Apple", "Orange"],
        4: ["Dog", "Cat"]
    };

    $("#primary-dropdown").on("change", function() {
        var selected = $(this).val();
        $("#secondary-dropdown").empty();
        $.each(options[selected], function(i, option) {
            $("#secondary-dropdown").append("<option value='" + (i + 1) + "'>" + option + "</option>");
        });
    });
});</code>
Salin selepas log masuk

Penjelasan:

  • Kami mentakrifkan objek yang dipanggil pilihan untuk memegang perkaitan antara nilai lungsur turun utama dan pilihan lungsur kedua yang sepadan.
  • Apabila nilai lungsur turun utama berubah, kami mengosongkan lungsur turun kedua dan gelung melalui objek pilihan.
  • Untuk nilai lungsur turun utama yang dipilih, kami menambahkan pilihan yang sepadan pada lungsur turun kedua.

Penyelesaian ini membolehkan anda membuat lungsur turun berlatarkan tanpa bergantung pada pangkalan data.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Dropdown Lantas Tanpa Pangkalan Data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!