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

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 协议(protocol)是无状态的。这意味着，一旦您发送了表单，页面将重新加载，并且值将丢失。要解决这个问题，你可以做两件事:

1 - 使用 $ajax 异步发送 for。喜欢:

$("#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();
}

在 View 中:

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

希望有帮助。