Question

我正在构建一个Web应用程序。在某些时候，用户需要将数据输入到表单。此表单包含多个文本字段和DropDownLists。

其中一个DDL依赖于之前的DDL。当用户从第一个DDL中选择一个值时，第二个DDL应该从数据库加载与第一个DDL的选定值相关的数据。

到目前为止，我只实施了PHP和JS，（没有AJAX，jQuery或其他任何内容）来处理我的大部分问题。

我想知道如何在选择第一个DDL上的项目后从数据库填充第二个DDL。

任何帮助将不胜感激。谢谢！

Answer 1

以下是一个例子：

http://tutorialzine.com/2011/11/chained-ajax-selects-jquery/

Google是你的朋友：）

Answer 2

Ajax是你最好的选择。 this会有所帮助

Answer 3

如果第二个下拉列表中的数据依赖于第一个下拉列表中的数据，则必须将第二个下拉列表的值加载到javascript对象中，如下所示：

// Given the options in the first dropdown are: "foo", "bar", and "baz"
var secondData = {
    foo: ['lorem', 'ipsum'],
    bar: [1,2,3],
    baz: []
}

在第一个下拉列表中添加“更改”事件，并给定该下拉列表的值，使用secondData对象中包含的值加载第二个下拉列表的内容。

Answer 4

如果你习惯使用jQuery（我强烈推荐），那么这样的事情应该是：

$("#dropdown").on("change", function() {//change [dropdown] to the actual ID of your dropdown
    var selected=$(this).find("option:selected").val();//assuming your dropdown has a value to send, otherwise use text()

    $.get("options.php?selected="+selected, function(data) {
        var options=data.split("\n");
        var newSelectHTML="<select name=\"whatever\">\n";

        for (var i=0;i<options.length;i++) {
            newSelectHTML+="<option>"+options[i]+"</option>";
        }

        newSelectHTML+="</select>";
        $("#form").append(newSelectHTML);//again, change [form] to the correct ID.
    }
}

此代码只使用ID“下拉列表”（根据需要更改）获取当前所选DDL选项的值，并将其发送到$_GET["selected"];中的PHP文件options.php。假设该文件然后输出由新行（\n）分隔的选项列表。然后JavaScript接受它，逐行拆分，遍历选项，并为新DDL创建HTML并将其附加到元素ID form。没有错误处理，但正如他们所说，这是读者的练习。返回的是变量data。

如何在更改第一个DropDownList后从数据库加载第二个DropDown列表

4 个答案: