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 回答