Question

在我的Ajax.BeginForm我有一个下拉列表，我可以在用户从该列表中选择一个项目时加载部分视图。它工作正常，但我想做以下事情：当用户在列表中选择选项编号3时，我想显示另一个下拉列表

这可能吗？

这是我的代码

 @using (Ajax.BeginForm("Report", "Home", new { }, new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        OnBegin = "AjaxBegin",
        OnComplete = "AjaxComplete",
        OnSuccess = "LoadSuccess",
        OnFailure = "LoadFailure",
        UpdateTargetId = "result",

    }, new { @class = "form-horizontal form-small" }
        ))
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(model => model.ReportId)

        <div class="col-md-9">
            @Html.DropDownListFor(x => x.SelectedOptionId, Model.ReportOption, new { onchange = "$(this.form).submit();", @class = "form-control input-sm" })
        </div>
    <div id="cat" class="col-md-9">
            @Html.DropDownListFor(x => x.SelectedOptionId, Model.CatOption, new { onchange = "$(this.form).submit();", @class = "form-control input-sm" })
        </div>

    }

更新根据您的建议，我将代码更改为以下

 <div class="col-md-2">
        @Html.DropDownListFor(x => x.SelectedOptionId, Model.ReportOption, new { @class = "form-control input-sm" })
    </div>
        <div class="col-md-1">

            @Html.DropDownListFor(model => model.SelectedCatId, Model.LotOptions, new { @class = "hidden form-control input-sm" })

        </div>

        <div class="col-md-2">
            @using (Ajax.BeginForm("Report", "Home", new { }, new AjaxOptions
            {
                InsertionMode = InsertionMode.Replace,
                OnBegin = "AjaxBegin",
                OnComplete = "AjaxComplete",
                OnSuccess = "LoadSuccess",
                OnFailure = "LoadFailure",
                UpdateTargetId = "result",

            }, new { @class = "form-horizontal form-small" }
                ))
            {
                @Html.AntiForgeryToken()
                @Html.HiddenFor(model => model.IdReport)

                <input id="subButon" class="btn btn-primary btn-sm" type="submit" value="Submit" />
            }

        </div>

<script type="text/javascript">

        $(document).ready(function() {
            $("#SelectedOptionId").change(function() {
                var value = $("#SelectedOptionId").val();
                if (value == "3") {
                    $("#SelectedCatId").removeClass('hidden');
                } else {
                    $("#SelectedCatId").addClass('hidden');
                }

            });
        });

但是，当我提交时，SelectedOptionId , SelectedCatId都设置为空有什么想法吗？

Answer 1

是的，您可以在onchange事件中调用自定义函数。

在您的视图中

<div class="col-md-9">
    @Html.DropDownListFor(x => x.SelectedOptionId, Model.ReportOption, new { onchange = "onChange(this);", @class = "form-control input-sm" })
</div>
<div id="cat" class="col-md-9">
    <!-- Consider use another property for this dropdown. Note the 'hidden' class which makes the dropdown hidden. -->
    @Html.DropDownListFor(x => x.SelectedOptionId, Model.CatOption, new { onchange = "onChangeCat(this)", @class = "form-control input-sm hidden" })
</div>

<强>的Javascript

function onChange(sender) {
    var dropdown = $(sender);

    //Selected value in SelectedOptionId dropdown
    var selectedValue = dropdown.val();

    var catDropDownList = $('#cat #SelectedOptionId');

    if (selectedValue === "3") {
        catDropDownList.removeClass('hidden');
    } else {
        catDropDownList.addClass('hidden');

        //Submit the form
        dropdown.parents('form').submit();
    }

}

function onChangeCat(sender) {
    //Code executed when the selected value of the second dropdown change.
}

注意：对同一属性使用两个DropDownListFor会导致生成具有相同ID的两个元素（在本例中为SelectedOptionId）。你应该避免这种情况，并为每个下拉列表使用一个属性。

您应该检查第一个下拉列值，以便在加载页面时显示/隐藏第二个下拉列表。

回答问题更新

不会发送下拉值，因为它们没有嵌套在表单中。

多下拉列表

1 个答案: