Question

我是ajax的新手，我需要帮助。这是一个在第一次选择后填充第二个下拉列表的脚本。使用从数据库获取数据的GetStates操作可以正常工作。

<script type="text/javascript">
$(document).ready(function () {
    $("#CountriyID").change(function () {
        var abbr = $("#CountriyID").val();

        $.ajax({
            url: "/SetUp/GetStates",
            data: { countryCode: abbr },
            dataType: "json",
            type: "POST",
            error: function () {
                alert("An error occurred.");
            },
            success: function (data) {
                var items = "";
                $.each(data, function (i, item) {
                    items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });

                $("#StateID").html(items);
            }
        });
    });
});

</script>

以下是我正在处理的观点

@using (Html.BeginForm("Index", "SetUp", FormMethod.Post))
{
    <form action="" method="post">
        <input type="submit" name="action:AddCity" value="Add" />
    </form>
    <div class="editor-field">@Html.DropDownListFor(model => model.CountriyID, new SelectList(Model.Countries, "ID", "Text"))</div>
     <div class="editor-field">@Html.DropDownListFor(model => model.StateID, new SelectList(Model.States, "ID", "Text"))</div>
}

如果我需要添加城市，请点击提交按钮，然后转到正确的操作。当我填充下拉列表时，问题就出现了。人口之后，城市按钮不再响应。看起来url得到堆栈在“/ SetUp / GetStates”，我不能在我的表单上做任何动作。

请让我知道我做错了什么以及在哪看看？提前谢谢。

Answer 1

尝试以下代码希望它可以帮助您：

<form action="" method="post">

    <div class="editor-field">@Html.DropDownListFor(model => model.CountriyID, new SelectList(Model.Countries, "ID", "Text"))</div>
     <div class="editor-field">@Html.DropDownListFor(model => model.StateID, new SelectList(Model.States, "ID", "Text"))</div>

<input type="submit" name="action:AddCity" value="Add" />
    </form>

由于下拉列表必须放入标签中，因此提交必须位于标签的最后位置。

MVC ajax下拉列表网址更改

1 个答案: