0

我是 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”处获取堆栈，我无法再对我的表单执行任何操作。

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

4

1 回答 1

0

试试下面的代码希望对你有帮助：

<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>

由于下拉菜单必须进入标签，并且理想情况下提交必须位于标签的最后位置。

于 2013-10-23T19:09:36.900 回答