Question

我有一个下拉列表，用户选择后会重新加载包含一些新数据的页面。当在下拉列表中进行更改/选择和提交时，页面重新加载和下拉列表变为为空。我想在提交后保留下拉数据并显示用户选择的内容。在此先感谢您的帮助，我是新手。

$( document ).ready(function() {
    $("#ddlConsumer").change(function () {
        var selected = $("#ddlConsumer :selected").text();
        localStorage.setItem("selected", selected);
        $("#paymentform").submit();

    });
});

var selectedConsumer = localStorage.getItem("selected");
console.log(selectedConsumer);
$("#ddlConsumer").val(selectedConsumer);

HTML部分：

<td>
    <div class="form-group">
        <label class="col-sm-4 control-label">Consumer: <span>*</span> </label>
        <div class="col-sm-6">
            @Html.DropDownList("ConsumerID", (SelectList)ViewBag.Consumer, new { id = "ddlConsumer", @class = "form-control"}) 
        </div>
    </div>
</td>

Answer 1

您应该注意的一件事是HTTP协议是无状态的。这意味着，一旦您发送了表单，页面将被重新加载，并且值将丢失。要解决这个问题，您可以做两件事：

1 - 使用$ ajax发送异步。像：

$("#ddlConsumer").change(function () {
    var selected = $("#ddlConsumer :selected").text();
    localStorage.setItem("selected", selected);

    $.post('yourUrlAction', $('#TesteForm').serialize(), function () {
        //Here you can manipulate the code after a successfull call
    });
});

2 - 获取后端的值并将其作为帖子的结果发回。这取决于您使用的技术作为后端，但在.net MVC中将是：

[HttpPost]
public ActionResult Index(string field)
{
    ViewBag.Value = field;
    return View();
}

在视图中：

<input name="field" id="field" type="text" value="@ViewBag.Value" />

希望有所帮助。

jQuery - 更改和表单提交后，下拉列表变空

1 个答案: