如何使用jQuery为Asp.Net DropDownList赋值（API返回选项文本场景）

问题原因 #

jQuery的val()方法设置下拉框选中值时，只会匹配<option>标签的value属性，你传入的是选项的展示文本，自然无法匹配到对应项。

解决方案 #

根据下拉选项数量多少可以选择两种实现方式：

1. 直接遍历匹配（选项少的时候用，写法简单）

过滤出文本和接口返回值一致的option，直接设置为选中状态即可，还可以加trim、大小写统一处理避免匹配失败：

$("#my-fields input[id*='Name']").val(name);
$("#my-fields input[id*='Age']").val(age);
// 替换原有给下拉框赋值的代码
$("#my-fields select[id*='Dept'] option").filter(function() {
  return $(this).text().trim() === dept.trim();
}).prop('selected', true);

2. 预生成映射关系（选项多的时候用，性能更高）

页面加载完成后先把所有下拉选项的「展示文本-值」存成映射对象，后续赋值直接查映射即可，不用每次遍历所有选项：

// 页面初始化时执行一次，生成映射关系
const deptTextMap = {};
$(function() {
  $("#my-fields select[id*='Dept'] option").each(function() {
    deptTextMap[$(this).text().trim()] = $(this).val();
  })
})

// 接口返回后赋值逻辑
$("#my-fields input[id*='Name']").val(name);
$("#my-fields input[id*='Age']").val(age);
$("#my-fields select[id*='Dept']").val(deptTextMap[dept.trim()]);

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