级联下拉菜单 [英] Cascading dropdowns

问题描述

我在MVC级联下拉菜单的工作。看来，我将无法轻松地按需创建的下拉列表中，而不是我将不得不把它发送给客户端之前添加下拉菜单。

I am working with cascading dropdowns in MVC. It appears that I will not be able to easily create dropdowns on demand, instead I will have to add the dropdowns before sending it to the client.

这是我正在做它现在：

在aspx页面

                <%: Html.DropDownListFor(model => model.ModelViewAd.Category1, Model.ModelViewAd.Category1List, "-- Välj kategori --")%>
            <%: Html.DropDownListFor(model => model.ModelViewAd.Category2, Model.ModelViewAd.Category2List, "-- Välj kategori --")%>
            <%: Html.DropDownListFor(model => model.ModelViewAd.Category3, Model.ModelViewAd.Category3List, "-- Välj kategori --")%>
            <%: Html.DropDownListFor(model => model.ModelViewAd.Category4, Model.ModelViewAd.Category4List, "-- Välj kategori --")%>

这是呈现这样的：

<select id="ModelViewAd_Category1" name="ModelViewAd.Category1">
    <option value="">-- V&#228;lj kategori --</option>    
    <option value="10">Fordon</option>
    <option value="15">F&#246;r hemmet</option>
    <option value="17">Bostad</option>
    </select>
<select id="ModelViewAd_Category2" name="ModelViewAd.Category2">
    <option value="">-- V&#228;lj kategori --</option>
</select>
<select id="ModelViewAd_Category3" name="ModelViewAd.Category3">
    <option value="">-- V&#228;lj kategori --</option>
</select>
<select id="ModelViewAd_Category4" name="ModelViewAd.Category4">
    <option value="">-- V&#228;lj kategori --</option>
</select>

这是什么网页上的脚本如下：

This is what the script on the page looks like:

<script type="text/javascript">


            $(function () {
                $("select#ModelViewAd_Category1").change(function () {
                    var id = $(this).val();
                    var urlAction = "/AdCategory/GetCategoriesByParent1/" + id;
                    $.getJSON(urlAction, { id: id }, function (data) {
                        $("#ModelViewAd_Category2").addItems(data.d);
                    });
                });

                $("select#ModelViewAd_Category2").change(function () {
                    var id = $(this).val();
                    var urlAction = "/AdCategory/GetCategoriesByParent1/" + id;
                    $.getJSON(urlAction, { id: id }, function (data) {
                        $("#ModelViewAd_Category3").addItems(data.d);
                    });
                });

                $("select#ModelViewAd_Category3").change(function () {
                    var id = $(this).val();
                    var urlAction = "/AdCategory/GetCategoriesByParent1/" + id;
                    $.getJSON(urlAction, { id: id }, function (data) {
                        $("#ModelViewAd_Category4").addItems(data.d);
                    });
                });



            });


    </script>

然后，我有一个包含文件，其中包含这样的：

And then I have an included file that contains this:

$.fn.clearSelect = function () {
    return this.each(function () {
        if (this.tagName == 'SELECT')
            this.options.length = 0;
    });
}

$.fn.addItems = function (data) {
    return this.clearSelect().each(function () {
        if (this.tagName == 'SELECT') {
            var dropdownList = this;
            $.each(data, function (index, optionData) {
                var option = new Option(optionData.Text,
                         optionData.Value);
                if ($.browser.msie) {
                    dropdownList.add(option);
                }
                else {
                    dropdownList.add(option, null);
                }

                if ($(this).children().size() < 2) {
                    $(this).hide();
                }
                else {
                    $(this).show();
                }
            });
        }
    });
}

这个问题我现在是，我需要隐藏不包含任何选项，或者只包含一个选项的下拉列表。这应该在做给服务呼叫时，以及当页面发送到客户端（回传）。作为检查

The problem I now have is that I need to hide the dropdowns that do not contain any options or only contain one option. This should be checked when doing a call to the service as well as when the page is sent to the client ("POSTBACK").

我需要的是：

• 4下拉框


• 只有第一个下拉是可见的第一个进入页面时。


• 当选择从dropdown1的dropdown2一个选项，将填充等


• 如果只有1选项，然后在下拉应该被隐藏


• 如果所有4个下拉菜单设置和最终用户更改dropdown1，然后dropdown2应重新加载，其余被隐藏


• 如果用户已经选择了一些下拉菜单中（比如1，2和3），点击提交和页面不接受在服务器端（无效）下拉式菜单中应准确地设置为当用户点击提交按钮时页面返回给用户。

在这个有什么建议？

推荐答案

我写了一篇博客文章中针对此的此处（减去隐藏的部分 - 你似乎已经板上钉钉了）。
从本质上讲，你将需要重建的下拉与选定的值，如果有一个错误。

I wrote a blog post about this here (minus the hiding part - which you seem to have nailed down). Essentially, you will need to rebuild the dropdown with the selected values if there is an error.

$("#ClientId").change(function () {
    var clientId = "";
    $("#ClientId option:selected").each(function () {
        clientId += $(this)[0].value;
    });
    var url = '<%:Url.Action("ProjectList", "Client") %>' + "/" + clientId;
    $.getJSON(url, null, function (data) {
        var selectedValue = '<%:Model.ProjectId %>';
        $("#ProjectId").empty();
        $.each(data, function (index, optionData) {
            if (optionData.OBJID == parseInt(selectedValue))
                $("#ProjectId").append("<option value='" + optionData.ObjId+ "' selected='true'>" + optionData.Name + "</option>");
            else 
                $("#ProjectId").append("<option value='" + optionData.ObjId + "'>" + optionData.Name + "</option>");
        });
    });
}).change();

这篇关于级联下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！