0

我正在构建一个 Web 应用程序。在某些时候，用户需要向表单输入数据。此表单有几个文本字段和DropDownLists.

其中一个 DDL 依赖于其先前的 DDL。发生的情况是，当用户从第一个 DDL 中选择一个值时，第二个 DDL 应该从数据库中加载与第一个 DDL 的所选值相关的数据。

到目前为止，我只实现了PHPand , JS（no或其他任何东西）来处理我的大部分问题。AJAXjQuery

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

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

4

4 回答 4

3

这是一个例子：

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

谷歌是你的朋友 :)

于 2012-05-12T18:01:54.823 回答
1

阿贾克斯是你最好的选择。 这会有所帮助

于 2012-05-12T18:03:14.213 回答
0

如果您习惯使用 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.
    }
}

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

于 2012-05-12T18:04:47.557 回答
0

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

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

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

于 2012-05-12T18:01:28.783 回答