Question

我有一个带有两个选项的下拉列表，我从模型列表中查询，我想使用此下拉选项取代两个视图。

如果数据已存在，则首选显示是一个下拉框。第二选择显示表单以添加新记录。

这是视图

<div class="row-fluid">
                        <div class="control-group offset3">
                                <label for="text" class="control-label">Select Option</label>
                                <div class="controls">
                                    @Html.DropDownListFor(model => model.ParentChoicesId, Model.ParentChoices, "-- Select Choice --", new { required = "true", id = "choice", @class = "input-xlarge" })
                                </div>
                            </div>
                        <hr />
                        <div id="result">
                        <div class="row-fluid" id="newParent">
                        <div class="span6" >
                            <div class="control-group">
                                <label for="text" class="control-label">Title</label>
                                <div class="controls">
                                    @Html.DropDownListFor(model => model.pTitleId, Model.pTitle, "-- Choose Title --", new { @class = "input-xlarge", required = "true" })
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="FirstName" class="control-label">First name</label>
                                <div class="controls">
                                    @Html.TextBoxFor(model => model.pFirstName, new { @class = "input-xlarge", required = "true" })
                                </div>
                            </div>
                            .....

                            </div>
                        </div>
                        <div class="span6">
                            <div class="control-group">
                                <label for="text" class="control-label">Nationality</label>
                                <div class="controls">
                                    @Html.DropDownListFor(model => model.pCountryId, Model.pCountry, "-- Choose Country --", new { required = "true", @class = "input-xlarge" })
                                </div>
                            </div>

...............

                        </div>
                            </div>
                        <div class="row-fluid" id="existParent">
                        <div class="span6" >
                            <div class="control-group">
                                <label for="text" class="control-label">Title</label>
                                <div class="controls">
                                    @Html.DropDownListFor(model => model.ParentId, Model.Parents, "-- Choose Parent --", new { @class = "input-xlarge", required = "true" })
                                </div>
                            </div>
                        </div>
                            </div>
                        </div>

                    </div>

这是控制器正在查询我的选项

var parentChoice = GetParentChoice().Select(t => new SelectListItem
        {
            Value = t.Value,
            Text = t.Text
        });
        model.ParentChoices = parentChoice.AsEnumerable();


public static IQueryable<SelectListItem> GetParentChoice()
    {
        var choiceList = new List<SelectListItem>() 
        {
        new SelectListItem{ Text="New Parent", Value = "1" },
        new SelectListItem{ Text="Existing Parent", Value = "2" }
        };

        return choiceList.AsQueryable();
    }

这是jquery代码

<script>
    $(document).ready(function () {
        $("#result").fadeOut(0);
    });

    var selectedChoice;

    $("#choice").change(function () {

        selectedChoice = $("#choice").val().trim();

        if (selectedChoice === "-- Select Choice --") {
            $("#result").fadeOut();
        }
        else if (selectedChoice.val() === 1) {
            $("#result").hide("#existParent")
            $("#result").empty().append("#newParent").fadeIn();
        }
    });

</script>

这是我到目前为止所做的事情，我需要请一些帮助来完成它为你的时间坦克。

Answer 1

我想出来了，所以我提出了这个问题并且工作得非常好，谢谢无论如何

<script>
    $(document).ready(function () {
        $("#result").fadeOut(0);
    });

    $("#choice").change(function () {

        selectedChoice = $("#choice").val();

        if (selectedChoice == 1) {
            $("#existParent").hide()
            $("#result").fadeIn();
            $("#newParent").show();
        }
        else if (selectedChoice == 2) {
            $("#newParent").hide()
            $("#result").fadeIn();
            $("#existParent").show();
        }
        else if (selectedChoice == 0)
        {
            $("#result").fadeOut(0);
        }

    });

</script>

MVC5中的JQuery Dropdown更改操作

1 个答案: