如何让jQuery变量在页面刷新后仍能正常显示？

要解决页面刷新后经销商名称丢失的问题，核心是把选中的经销商文本持久化——要么通过后端Model传递，要么用前端本地存储。推荐后端传递的方式，更可靠且符合表单提交的逻辑。

方法一：后端Model存储经销商名称（推荐） #

1. 修改后端Model #

在你的ViewModel中添加一个存储经销商名称的属性：

public int DealerID { get; set; }
public string DealerName { get; set; } // 新增属性

在表单提交的Action中，根据DealerID查询对应的经销商名称并赋值给DealerName，或者在前端提交时把经销商文本一起传给后端。

2. 修改前端HTML #

• 替换<var>标签为语义更合适的<span>（如果坚持用<var>也可以，但设置内容要用text()而非val()）
• 添加隐藏字段，用于提交经销商文本到后端：

<tr>
    <td align="right">Dealership:</td>
    <td>
        @Html.DropDownListFor(m => m.DealerID, new List<SelectListItem>())
        @Html.HiddenFor(m => m.DealerName) <!-- 新增隐藏字段 -->
    </td>
    <td><span id="dealershipName">@Model.DealerName</span></td> <!-- 直接从Model渲染初始值 -->
</tr>
<tr>
    <td></td>
    <td><input type="submit" value="Submit" /></td>
    <td></td>
</tr>

3. 修正jQuery代码 #

var storedDealer = '';

$(document).ready(function () {
    let dealerId = @Model.DealerID;
    // 初始化选中经销商并同步文本
    if (dealerId !== 0) {
        const $selectedOption = $(`#DealerID option[value="${dealerId}"]`);
        $selectedOption.prop('selected', true);
        storedDealer = $selectedOption.text();
        $('#dealershipName').text(storedDealer);
        $('#DealerName').val(storedDealer); // 同步到隐藏字段
    }

    // 下拉框变更时更新文本和隐藏字段
    $('#DealerID').on("change", function () {
        const $selected = $(this).find(":selected");
        storedDealer = $selected.text();
        $('#dealershipName').text(storedDealer);
        $('#DealerName').val(storedDealer);
    });
});

function getDealers(el) {
    $.get(`@Url.Action("GetDealers", "Admin")?region=${$(el).val()}`, function (res) {
        let markup = "";
        res.forEach(item => {
            markup += `<option value="${item.Value}">${item.Text}</option>`;
        });
        $('#DealerID').prop('disabled', false).html(markup).show();

        // 动态加载后重新选中并同步文本（如果有初始DealerID）
        const dealerId = @Model.DealerID;
        if (dealerId !== 0) {
            const $selectedOption = $(`#DealerID option[value="${dealerId}"]`);
            if ($selectedOption.length) {
                $selectedOption.prop('selected', true);
                storedDealer = $selectedOption.text();
                $('#dealershipName').text(storedDealer);
                $('#DealerName').val(storedDealer);
            }
        }
    });
}

方法二：前端本地存储（无需修改后端） #

如果不想改动后端，可以用localStorage存储经销商文本，页面加载时读取：

var storedDealer = localStorage.getItem('storedDealer') || '';

$(document).ready(function () {
    let dealerId = @Model.DealerID;
    if (dealerId !== 0) {
        const $selectedOption = $(`#DealerID option[value="${dealerId}"]`);
        $selectedOption.prop('selected', true);
        storedDealer = $selectedOption.text();
        localStorage.setItem('storedDealer', storedDealer);
        $('#dealershipName').text(storedDealer);
    } else if (storedDealer) {
        // 尝试通过文本选中对应选项（注意重名问题）
        const $selectedOption = $(`#DealerID option:contains("${storedDealer}")`);
        if ($selectedOption.length) {
            $selectedOption.prop('selected', true);
            $('#dealershipName').text(storedDealer);
        }
    }

    $('#DealerID').on("change", function () {
        const $selected = $(this).find(":selected");
        storedDealer = $selected.text();
        localStorage.setItem('storedDealer', storedDealer);
        $('#dealershipName').text(storedDealer);
    });
});

注意：这种方法存在局限性，比如用户清除浏览器存储、经销商名称重复时会选中第一个匹配项，仅适合简单场景。

内容的提问来源于stack exchange，提问作者user153923