如何在没有数据库的情况下创建级联下拉菜单？

在没有数据库的情况下选择级联下拉列表

问题：

在一个表单中，您需要两个下拉列表，其中的选项第二个下拉列表取决于第一个下拉列表中的选择，全部不使用数据库。

解决方案：

尽管使用了数据库方法，但以下是如何在不使用数据库的情况下实现此目的的方法一：

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>

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>

说明：

• 我们定义一个名为 options 的对象来保存主下拉值与其对应的辅助下拉选项之间的关联。
• 当主下拉值发生变化时，我们清空辅助下拉列表并循环遍历选项对象。
• 对于选定的主下拉列表值，我们将相应的选项附加到辅助下拉列表。

此解决方案允许您创建级联下拉列表，而无需依赖数据库。

以上是如何在没有数据库的情况下创建级联下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！