如何编写一个简单的jquery来存储部分视图中两个下拉框和一个文本框的最后选择值

本文关键字：一个 选择 两个 最后 文本 jquery 简单 何编写 存储部 视图 | 更新日期: 2023-09-27 17:50:22

我在mvc中有一个下拉列表，如下所示。到目前为止，我面临的问题是，当验证失败时，视图(部分)没有维护先前选择的值。所以我想写一些jquery来存储最后选择的值，我将在控制器设置一个标志Viewbag。Error = true;然后显示带有最后选定值而不是默认值的控件。下面是现有的代码，它包含两个下拉框和一个文本框，并且都在Ajax中。贝京form，第二个下拉框是根据第一个下拉值作为Jason

的结果获取值

这就是代码

@using (Ajax.BeginForm("_firstGridAll", "mnis", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "PsitegridContent" }))
{
    @Html.ValidationSummary(true)
            <div style="float: left">
                @Html.Label("lbRegion", "Region*")
                @*@Html.ValidationMessage("REGION_CODE", "*")*@
                @Html.DropDownList("REGION_CODE", (SelectList)ViewBag.Categories, "Select region code")
                @Html.ValidationMessageFor(m => m.REGION_CODE)
            </div>
            <div class="tested">
                @Html.Label("lblSubregion", "Sub Region*")
                @*@Html.ValidationMessage("GEO_ZONE_CODE", "*")*@
                @*            @Html.ValidationMessageFor(m=>m.GEO_ZONE_CODE)*@
                <select id="GEO_ZONE_CODE" name="GEO_ZONE_CODE"></select>
            </div>
            <div class="tested">
                @Html.Label("lblSiteid", "Site Id*")
                @*@Html.ValidationMessage("PSITE_ID", "*")*@
                @*<input type="text" id="PSITE_ID" name="PSITE_ID" />*@
                @Html.TextBoxFor(m => m.PSITE_ID)
                @Html.ValidationMessageFor(m => m.PSITE_ID)
            </div>
            <div class="Testedagain">
                <input type="submit" value="Search" />
            </div>
}

如何编写一个简单的jquery来存储部分视图中两个下拉框和一个文本框的最后选择值

不知道为什么视图会失去属性的值，但这里有一些代码来存储这些值，然后你可以发布到你的控制器?

更新了使用localstorage的答案。现在，即使在页面刷新之后，数据也将被持久化。但是要确保清除成功的帖子上的值，以确保用户下次使用该表单时不会提交错误的值。

HTML: 

<label for="REGION_CODE">REGION_CODE: </label>
<select id="REGION_CODE">
    <option id="0" value="0">---</option>
    <option id="1" value="1">1</option>
    <option id="2" value="2">2</option>
</select>
<br />
<label for="GEO_ZONE_CODE">GEO_ZONE_CODE: </label>
<select id="GEO_ZONE_CODE">
    <option id="0" value="0">---</option>
    <option id="1" value="1">1</option>
    <option id="2" value="2">2</option>    
</select>
<br />
<label for="PSITE_ID">PSITE_ID: </label>
<input type="text" id ="PSITE_ID" />
<br />
<button type="button" id="refresh">Refresh Window</button>

JS: 

(function(){
    $("#refresh").click(function() {
        location.reload();
        console.log("regionCodeValue after refresh is: " + localStorage.regionCodeValue);
        console.log("geoCodeValue after refresh is: " + localStorage.geoCodeValue);
        console.log("pSiteId after refresh is: " + localStorage.pSiteId);
    });
    $("#REGION_CODE").change(function() {
        localStorage.regionCodeValue = this.value;
        console.log("regionCodeValue is: " + localStorage.regionCodeValue);
    });
    $("#GEO_ZONE_CODE").change(function() {
        localStorage.geoCodeValue = this.value;
        console.log("geoCodeValue is: " + localStorage.geoCodeValue);
    });
    $("#PSITE_ID").change(function() {
        localStorage.pSiteId = this.value;
        console.log("pSiteId is: " + localStorage.pSiteId);
    });
    //Call jquery to post the values to your controller?
    //On Success, call the following:
    //localStorage.pSiteId = '';
    //localStorage.geoCodeValue = '';
    //localStorage.regionCodeValue = '';
})();

JSFiddle来源。

相关文章：