使用jQuery AJAX实现dropdownlist与UI绑定及详情回填方法咨询

整体存在的通用问题 #

• 不要使用async: false：同步AJAX会阻塞浏览器主线程，所有用户交互、页面渲染都会被卡住直到请求结束，无特殊需求一律删除该行默认走异步请求即可。
• 手动拼接JSON风险高：你现在写的data: "{'Desigid':'" + Degid + "'}" 很容易因为入参包含特殊字符（比如单引号、换行）导致JSON格式错误，建议改用JSON.stringify自动序列化：

  data: JSON.stringify({Desigid: Degid})
  

• 缺少返回值非空校验：接口返回异常、Table数组为空时，直接取jsonData.Table[0]会抛出JS错误，导致后续所有赋值逻辑中断，建议先做合法性判断再取值。

下拉框绑定部分的问题 #

你当前写的$('#ddlDepartment').val(jsonData.Table[0].DepartmentId); 仅在满足以下两个前提时才会生效，缺少任意一个都会赋值失败：

1. 执行该赋值代码前，#ddlDepartment 下拉框已经完成了所有部门选项的初始化渲染
2. 下拉框每个option的value属性值，和接口返回的DepartmentId格式完全一致（比如都是数字/都是字符串，没有前后空格、大小写差异等）

如果出现赋值不生效的情况，可以加一段兼容逻辑兜底：

const targetDeptId = jsonData.Table[0].DepartmentId;
// 先判断对应value的option是否存在
if ($('#ddlDepartment option[value="' + targetDeptId + '"]').length) {
  $('#ddlDepartment').val(targetDeptId);
} else {
  // 可根据业务需求加兜底逻辑，比如提示、先拉取部门选项列表渲染后再赋值
  console.warn('未找到匹配的部门选项，ID：', targetDeptId);
}

优化后完整代码参考 #

function BindUpdateDetails(Degid) {
  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "DesignationMaster.aspx/BindUpdateDesignationMaster1",
    data: JSON.stringify({Desigid: Degid}),
    dataType: "json",
    success: function (result) {
      const jsonData = result.d;
      // 先校验返回数据合法性
      if (!jsonData?.Table?.length) {
        alert('未查询到有效数据');
        return;
      }
      const rowData = jsonData.Table[0];
      $('#txtDesignationId').val(rowData.DesignationId);
      $('#txtDepartmentCode').val(rowData.DesignationCode).prop('disabled', true);
      $('#txtDesignationName').val(rowData.DesignationName);
      // 下拉框赋值加兼容
      const targetDeptId = rowData.DepartmentId;
      if ($('#ddlDepartment option[value="' + targetDeptId + '"]').length) {
        $('#ddlDepartment').val(targetDeptId);
      }
      $('#chkIsActive').prop('checked', rowData.IsActive);    
    },
    error: function () {
      alert('详情查询失败');
    }
  });
}

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