.NET6 MVC视图中如何让下拉列表携带CountryID实现无DB刷新过滤

要实现不调用数据库的前端州下拉过滤，核心是让每个<option>标签携带对应的CountryID，再通过jQuery基于这个属性做筛选。以下是具体步骤：

1. 修改控制器代码，生成带CountryID属性的选项集合 #

SelectList的第四个参数是默认选中值，不是用来存储额外关联数据的。你需要手动将countryStates转换为SelectListItem集合，给每个选项添加自定义data-countryid属性：

ViewData["CountryState"] = countryStates.Select(s => new SelectListItem
{
    Value = s.PK_StateID.ToString(),
    Text = s.StateName,
    // 添加自定义属性，存储关联的CountryID
    HtmlAttributes = new Dictionary<string, object>
    {
        { "data-countryid", s.FK_CountryID.ToString() }
    }
});

2. 视图代码无需大幅修改 #

保持DropDownListFor的调用即可，渲染后的HTML会自动带上data-countryid属性：

<li class="columns three">
    <h3>State</h3>
    @Html.DropDownListFor(model => model.ResidentialStateId, (IEnumerable<SelectListItem>)ViewData["CountryState"], "", new { @id = "drpEditIndContactResidencialCountryState", @class = "chzn-select width-175" })
</li>

此时查看HTML，每个州选项会变成类似这样：

<option value="1" data-countryid="1">Badakhshan</option>

3. 编写jQuery过滤逻辑（兼容1.8.3版本） #

假设国家下拉框的ID是drpCountry，添加以下事件监听代码，切换国家时过滤州选项：

// 监听国家下拉框的变化
$("#drpCountry").change(function() {
    var selectedCountryId = $(this).val();
    var stateDropdown = $("#drpEditIndContactResidencialCountryState");
    
    // 显示所有选项，再隐藏不符合条件的
    stateDropdown.find("option").show();
    // 排除默认空选项
    stateDropdown.find("option:not([value=''])").each(function() {
        var optionCountryId = $(this).data("countryid");
        if (optionCountryId !== selectedCountryId) {
            $(this).hide();
        }
    });
    
    // 重置选中值为空（可选，根据需求调整）
    stateDropdown.val("");
    // 更新chosen插件的显示（老版chosen用liszt:updated）
    stateDropdown.trigger("liszt:updated");
});

注意：如果是新版本chosen，触发事件为chosen:updated，jQuery 1.8.3搭配的老版插件通常用liszt:updated，请根据实际情况调整。

额外说明 #

如果需要页面加载时就根据默认选中的国家过滤，在页面加载完成后手动触发一次change事件即可：

$(document).ready(function() {
    $("#drpCountry").trigger("change");
});

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