加载下拉框时如何设置Select选项的截取后Value值？

你的问题出在服务器端渲染和客户端JS的执行时机不匹配：Razor是在服务器生成HTML代码，你写的value="getEventCode(@item)"会直接把这个字符串作为option的value属性值输出，根本不会调用客户端的JS函数——JS要等页面加载完成后才会运行，服务器根本不知道你写的JS函数是什么。

下面给两种可行的实现方式：

方法一：服务器端C#直接处理（推荐） #

直接在Razor循环里用C#字符串方法截取括号前的内容，生成正确的value属性：

<select class="form-control chosen-select" id="eventCode" name="eventCode" >
@foreach (var item in ViewBag.Events)
{
    // 处理无括号的异常情况，避免报错
    var eventCode = item.Contains('(') 
        ? item.Substring(0, item.IndexOf('(')).Trim() 
        : item;
    <option value="@eventCode">@item</option>
}
</select>

这种方式最稳妥，HTML生成时value就已经是正确的，不需要依赖客户端JS，对初始状态、表单提交和SEO都更友好。

方法二：客户端JS动态修改 #

如果因为某些限制必须在客户端处理，可以在页面加载完成后遍历所有option，修改它们的value：

<select class="form-control chosen-select" id="eventCode" name="eventCode" >
@foreach (var item in ViewBag.Events)
{
    <option value="">@item</option>
}
</select>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    const selectEl = document.getElementById('eventCode');
    // 遍历所有选项
    Array.from(selectEl.options).forEach(option => {
        const text = option.textContent;
        if (text.includes('(')) {
            option.value = text.substring(0, text.indexOf('(')).trim();
        } else {
            option.value = text;
        }
    });
    // 如果使用了chosen插件，需要重新初始化
    if ($.fn.chosen) {
        $('#eventCode').chosen('destroy').chosen();
    }
});
</script>

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