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

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

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

消费者：*
@DropDownList（“ConsumerID”，（SelectList）ViewBag.Consumer，新的{id=“ddlConsumer”，@class=“form control”}）

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

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

并且认为：

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

---

希望这会有所帮助。

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

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

并且认为：

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

---

希望这能有所帮助。

我不知道您的下拉文本/值是什么样子，但我可以看到您保存的是.text（）而不是.val（）。然后设置下拉列表val=所选选项的文本。如果文本与该值不匹配，您将无法获得所选选项。因此，上面显示的所有js代码都应位于doc.ready（）中。$（“#ddlConsumer”）.val（选中）可能在Razor呈现dropdownlistI添加的.val（）之前执行，但最终会在同一位置。还尝试在doc.ready（）中添加除最后一行之外的所有内容。还是不明白（最后一行是doc.ready中最重要的一行…我不知道您的下拉文本/值是什么样子，但我可以看到您正在保存的是.text（）而不是.val（）。然后您将设置下拉列表val=所选选项的文本。如果文本与值不匹配，您将无法获得所选选项。因此，上面显示的所有js代码都应位于doc.ready（）中。在Razor呈现dropdownlistI添加的.val（）之前，可能会执行$（“#ddlConsumer”）.val（所选），但最终还是在同一个位置。还尝试在doc.ready（）中添加除最后一行之外的所有内容。仍然无法理解。：（最后一行是doc.ready中最重要的一行。。。