jQuery单选按钮checked与change事件下ASP.NET MVC下拉框加载问题

解决方法 #

问题根源是单选按钮的change事件仅在用户手动切换选项时触发，页面初始化阶段默认选中的单选按钮不会触发该事件，因此组合框没有加载数据。只需要在页面初始化逻辑中主动获取当前选中的单选按钮值，调用一次数据加载方法即可。

修改后的完整代码如下：

$(function() {
  $('[id*=ddlTopEmployees]').select2().next().hide();
  // 绑定单选按钮切换事件
  $('[id*=Approve_Type]').change(function() {
    setDropDownProductsA($(this).val())
  });
  // 新增：页面加载完成后主动触发默认选中项的加载逻辑
  const defaultCheckedVal = $('[id*=Approve_Type]:checked').val();
  if (defaultCheckedVal) {
    setDropDownProductsA(defaultCheckedVal);
  }
});

function setDropDownProductsA(xVal) {
  try {
    $("#ddlEmployees").empty().trigger("change")
    $.ajax({
      url: '../FindProductTypes',
      type: 'POST',
      dataType: 'json',
      cache: false,
      async: false,
      data: {
        AppLvlId: xVal
      },
      success: function(data) {
        if (data.Success == true) {
          $("#ddlEmployees").select2({
            width: '100%',
            data: JSON.parse(data.items)
          });
        }
      }
    });
  } catch (err) {
    console.log(err.message)
  }
}

注意事项 #

• 请确保服务端渲染视图时，默认要选中的单选按钮已经添加了checked属性，尤其是隐藏单选按钮2的场景，必须给单选按钮1默认加checked，否则初始化时读不到选中值
• 代码中async: false是同步请求，会阻塞浏览器主线程，非必要场景建议去掉该配置改用异步逻辑，不影响现有功能正常运行

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