Question

我有一个用C＃编写的Web应用程序，我正在更新一个html前端。有一个表单有两个下拉选项。

第一个下拉需要调用一个C＃函数并用结果填充它的选项（IEnumerable，但我可以在必要时更改它）

当选择第一个下拉列表时，我需要它在第二个下拉列表中触发一个函数，该函数将第一个框的选定选项作为参数，然后再次使用结果填充自己。

所以，如果我的事情是关于汽车的，那么在加载表格时，它会从函数中得到它所有制作的列表（它必须是一个函数，而不是数据库，这不是什么东西我可以改变）当你选择一个make时，然后用它作为参数将所有带有make的汽车模型填充到第二个框中。

所以我的问题是 - 如何在html表单上完成此操作

Answer 1

这样的案例是通过使用JavaScript和Web服务异步填充选择来完成的。因此，您的C＃应用程序不会直接填充任何这些选择，但是简单地调用视图。然后触发JS-AJAX操作来填充第一个选择。然后，您可以监听此控件的select-change-event以再次填充下一个控件。

此主题过于笼统，无法发布简单的答案。你应该看看jQuery Ajax作为起点。

Answer 2

这个例子使用MVC，但我认为没有MVC就能以相同的方式实现。

使用获取所需列表的javascript创建一个函数，清除列表然后使用foreach循环将每个项添加到列表中例如：

我的选择元素（codD和codC）：

<div class="row" id="listD">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon" style="min-width: 85px;">Distrito</span>
                            <select class="form-control" id="codD" name="DD">
                            </select>
                        </div>
                    </div>
                </div>
                <br id="brD" />
                <div class="row" id="listC">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon" style="min-width: 85px;">Concelho</span>
                            <select class="form-control" id="codC" name="CC">
                            </select>
                        </div>
                    </div>
                </div>

现在改变codC的函数

function ChangeConcelhos(dist) {
        $.getJSON("@Url.Action("MudarConcelho", "Tabelas")", { distrito: dist },
            function (fooList) {
                $("#codC").empty();
                if (fooList.length > 0) {
                    $.each(fooList, function (i, foo) {
                        $("#codC").append("<option value=" + foo.CC + ">" + foo.Desig + "</option>");
                    });
                }
            });
    }

不要忘记添加codD的事件更改

(function() {
  $("#codD").change(function () {ChangeConcelhos($("#codD").val())});
})();

Answer 3

将onChange事件添加到要从中获取值的组合：onChange="load_cascaded_combo(this.value)" 这是jQuery：

function load_cascaded_combo(val) {  

                    var ddl = $('#drops'); // this is the box you want to load
                    ddl.empty(); // clear current content
                    var project = document.getElementById("select1");// this is the combo you get value from
                    var stringArray = new Array();
                    stringArray[0] = project.value;
                    var postData = { values: stringArray };                    
                    $.ajax({
                        type: "GET",
                        url: "/SomeControler/SomeMethod",
                        data: postData,
                        success: function (data) {
                                var i = 0;
                                $.each(data.Result, function () {
                                    ddl.append(
                                     "<option value='" + data.Result[i] + "'>" + data.Result[i] + "</option>"
                                    );
                                    i++;
                                });                           
                        },
                        dataType: "json",
                        traditional: true
                    });
                }             
            };

Html下拉列表 - 调用函数以在列表上生成选项

3 个答案: