如何为Html.DropDownListFor生成的<option>元素添加ID属性？

默认情况下，ASP.NET MVC的DropDownListFor辅助方法只会给<select>元素设置ID，不会自动给内部的<option>添加ID，你可以用下面两种方式实现需求：

1. 后端手动构建带ID的Option #

先在后端把货币选项构造成带自定义属性的SelectListItem集合，示例代码如下：

// 示例：从数据源生成带ID属性的选项集合
var currencyOptions = new List<SelectListItem>
{
    new SelectListItem { Text = "BTC", Value = "BTC", HtmlAttributes = new { id = "opt-btc" } },
    new SelectListItem { Text = "GBP", Value = "GBP", HtmlAttributes = new { id = "opt-gbp" } },
    new SelectListItem { Text = "ETH", Value = "ETH", HtmlAttributes = new { id = "opt-eth" } }
};
// 把这个集合赋值给Model.CurrencyFrom

然后在视图里不要用DropDownListFor的默认渲染逻辑，手动遍历生成<select>和<option>：

<select id="order_CurrencyFrom" name="order.CurrencyFrom" onchange="DropdownSelector(this.value)">
    @foreach (var opt in Model.CurrencyFrom)
    {
        <option value="@opt.Value" id="@opt.HtmlAttributes["id"]" @(opt.Selected ? "selected" : "")>@opt.Text</option>
    }
</select>

这样后端生成的HTML里，每个<option>就会带有你指定的ID。

2. 前端用jQuery动态添加ID #

如果不想改动后端逻辑，直接在页面加载完成后用jQuery给选项批量添加ID：

$(function() {
    // 遍历目标下拉框的所有option，根据value生成ID
    $('#order_CurrencyFrom option').each(function() {
        $(this).attr('id', 'opt-' + $(this).val().toLowerCase());
    });
});

这段代码会给每个<option>生成类似opt-btc、opt-gbp的ID，之后你就能通过ID直接操作对应的选项了。

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