如何在ASP.NET Core中使用jQuery触发select下拉列表内的链接

• HTML规范错误：<option>标签内不允许嵌套<a>等可交互元素，浏览器渲染时会自动移除你写的a标签，所以绑定的链接根本不存在
• ID重复冲突：你在循环生成的每一行表格里都给下拉框用了相同的id=record_selector，HTML要求id全局唯一，jQuery选择器只会匹配到页面里第一个出现的下拉框，其他行的下拉框事件根本不会绑定
• jQuery语法错误：你写的选择器(this.children:selected)完全不符合jQuery语法，且.click后面没有加执行括号，事件不会触发
• 事件选择错误：下拉框选择选项应该监听change事件而非click事件，避免不必要的触发

第一步：修改CSHTML代码 #

把option里的a标签去掉，直接将跳转链接存入option的自定义data属性中，同时把下拉框的id改为class避免重复，顺便修正代码里pvm.Patient的笔误（应该是pvm.Person）

<tbody>
    @foreach(PersonViewModel pvm in Model)
   { <tr>
       <td><a asp-action="Details" asp-controller="Person" asp-route-id="@pvm.Person.PersonID">@pvm.Person.FullName</a></td>
        <td>@pvm.Person.Age</td>
        .....        
         @if (pvm.Person.Records.Count != 0)
         {<td>               
            <!-- 把id改为class，避免重复 -->
            <select class="record-selector">
               @foreach(Record r in pvm.Person.Records)
               {
                    if(!r.IsHired){
                        <!-- 用data-url存储生成好的跳转链接，不要嵌套a标签 -->
                        <option value="@r.RecordID" data-url="@Url.Action("Index", "Record", new { id = r.RecordID })">
                            Not Hired @r.RecordNumber
                        </option>
                    }
                    if(r.IsHired){
                        <option value="@r.RecordID" data-url="@Url.Action("Index", "Record", new { id = r.RecordID })">
                            Hired @r.RecordNumber
                        </option>
                    }
               }
            </select>
         </td>}

          @if (pvm.Person.Records.Count == 0)
          {<td><a asp-action="CreateUpdateRecord" asp-controller="Admin">Create new record</a></td>}    
   </tr>}
</tbody>

第二步：修改jQuery代码 #

<script>
$(function(){
    // 用class选择器绑定所有下拉框的change事件
    $(".record-selector").change(function(){
        // 获取选中option的跳转链接
        const targetUrl = $(this).find("option:selected").data("url");
        // 执行页面跳转，需要新开窗口可替换为 window.open(targetUrl, '_blank')
        if(targetUrl) window.location.href = targetUrl;
    });
});
</script>

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