Mvc，Jquery，选择。依赖下拉菜单答案

【问题标题】：Mvc, Jquery, Chosen. Dependent DropwdownsMvc，Jquery，选择。依赖下拉菜单
【发布时间】：2014-10-30 21:42:25
【问题描述】：

帮助解决问题：在我的 mvc 项目中，我有两个选中的下拉列表（带复选框的下拉列表）我需要做的是：在第一个下拉列表中选择项目后，根据首先选择的项目过滤（更好地填充）第二个。

我通过 getJSON 获得过滤数据，因为我无法刷新下拉列表。

这是我的代码：

（有类似的问题，我在这里没有找到解决方案https://stackoverflow.com/questions/26239795/how-to-add-multiple-dependent-dropwdowns-chosen-gem）

        @Html.DropDownList("divisionIds", (IEnumerable<SelectListItem>)ViewBag.DivisionList, null, new { multiple = "multiple", @class = "multiselect" })
        <script type="text/javascript">
            //$("#divisionIds").multipleSelect()
            $("#divisionIds").chosen()
            $("#divisionIds").on('change', function (e) {
                //alert($("#divisionIds").val());
                var val = $("#divisionIds").val();
                var subItems = "";
                //alert(val);
                $.getJSON("/Home/GetFilteredPostingGroups/" + val, null, function (data) {
                    $.each(data, function (index, item) {
                        subItems += "<option value='" + item.Value + "'>" + item.Text + "</option>"
                    });

                    alert(subItems);

                    //here...
                    $("#postingGroupIds").empty();
                    $("#postingGroupIds").append(subItems);
                    $("#postingGroupIds").trigger("chosen:updated");
                    $("#postingGroupIds").change();


                });
            });
        </script>

        </td>
        <td>

        </td>
    </tr>
    <tr>
        <td>

        </td>
        <td>
            @*@Html.DropDownList("postingGroup")*@
            @Html.DropDownList("postingGroupIds", (IEnumerable<SelectListItem>)ViewBag.PostingGroupList, null, new { multiple = "multiple", @class = "multiselect" })
            <script type="text/javascript">
                $("#postingGroupIds").chosen()
            </script>
        </td>
        <td>
            <input type="submit" name="Command" value="@Command.Viewing" />
        </td>
    </tr>

怎么了？或者如何以其他方式执行此操作，也许是其他控件？

谢谢！

【问题讨论】：

不应用chosen插件能用吗？
插件控制不错！问题将在成功回调data 中出现。查看 console.log(data) 中的数据并向我们展示数据的样子。我为此创建了一个小提琴Here is the Working Fiddle Link
谢谢，文卡塔。很好的样品，我发现了一个问题。当我将我的 javascript 代码放入 $(function) () {...} 时，它开始工作。我不擅长 javascript，请告诉它为什么会这样？
我会在回答中添加一个带有建议的描述，以便您更好地理解

标签： jquery asp.net-mvc model-view-controller

【解决方案1】：

Chosen jQuery-Plug-In 很好。很高兴Working Fiddle Example 帮助您解决了这个问题。

根据 cmets，您已经意识到在将脚本块移动到 DOM-Ready 处理程序函数体后它正在工作。你问你想知道更多关于它的信息。

这里是描述：
对于您的情况，DOMContentLoaded/jQuery-DOM-Ready event-handler 是正确的地方。
我们也可以在窗口加载事件处理程序上运行即时可执行脚本代码。

这里我们应该了解 jQuery 及其插件的一件事：
$(=jQuery) 或其插件或相关的 html 元素在 document-ready 事件触发之前不会准备好，因此我们必须始终将 JavaScript 代码保留在准备好的处理程序主体块中，如下所示，需要在呈现 html 后立即运行

<script>
    $(document).ready(function(){
        //Your immediate executable JS Code should be here
    });

    //OR like below shortcut syntax

    $(function(){
        //Your immediate executable JS Code should be here
    });
</script>

我们为什么要把 JavaScript 放在 DOMContentLoaded 事件处理程序中（即jQuery's document-ready 事件处理程序块，它会立即在 html 脚本片段中运行/执行？

DOMContentLoaded 事件在 document 完全加载和解析后触发，无需等待样式表、图像和子框架完成加载（加载事件可用于检测完全加载的页面）。

这是来自 Mozilla 开发文档的纯 html 示例脚本

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

$(handler) is jQuery's method 检测上述内容加载状态
这是来自jQuery learning docs 的描述： 直到@ 987654334@ 是ready。 jQuery 为您检测到这种准备状态。包含在 $( document ).ready() 中的代码只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。包含在 $( window ).load(function() { ... }) 中的代码将在整个页面（图像或 iframe）（而不仅仅是 DOM）准备好后运行。

【讨论】：

【解决方案2】：

或者如何以其他方式执行此操作，也许是其他控件？

如果您愿意查看第 3 方工具，您可以选择 Kendo UI。他们为此提供了一些东西，而且非常容易实现：

http://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist

【讨论】：

【解决方案3】：

我有两个下拉菜单，第一：

<td>
           @Html.DropDownList("divisionIds", (IEnumerable<SelectListItem>)ViewBag.DivisionList, null, new { multiple = "multiple", @class = "multiselect" })
                <script type="text/javascript">
                    $("#divisionIds").chosen();
                    $("#divisionIds").on('change', function (e) {
                        var val = $("#divisionIds").val();
                        var subItems = "";
                        $.getJSON("/Home/GetFilteredPostingGroups/" + val, null, function (data) {
                            $.each(data, function (index, item) {
                                subItems += "<option value='" + item.Value + "'>" + item.Text + "</option>"
                            });
                            $("#postingGroupIds").empty().append(subItems).trigger("chosen:updated");
                        });
                    });
                </script>
</td>

第二个：

<td>
     @Html.DropDownList("postingGroupIds", (IEnumerable<SelectListItem>)ViewBag.PostingGroupList, null, new { multiple = "multiple", @class = "multiselect" })
     <script type="text/javascript">
            $(function () {
                $("#postingGroupIds").chosen();
            });
     </script>
</td>

当我输入（在第二个下拉列表中）代码时：** $("#postingGroupIds").chosen(); ** 进入 $(function ( .. here ..) { } 它开始工作了。

谢谢。

【讨论】：