JavaScript实现optgroup内option自动选中：更新用户时城市选项未选中

问题原因 #

你的代码逻辑本身无错误，核心问题大概率是数据类型不匹配：data对象里的city值是数字类型（比如1），而<option>的value属性在HTML中默认是字符串类型（比如"1"），jQuery的val()方法匹配select选项时会严格比对类型，导致无法命中目标选项。少数情况下也可能是模态框未完全渲染完成就执行了赋值操作。

解决方案 #

方案1：统一数据类型（推荐） #

赋值时将data[key]强制转换为字符串，确保和option的value类型一致：

$(".update-user").on('click', function(e) {
  e.preventDefault();
  var data = $(this).data("json");
  var $updateUserModal = $('#update-user-modal');

  for (key in data) {
    $updateUserModal
      .find('[name="' + key + '"]')
      .val(String(data[key])); // 转换为字符串类型
  }
});

方案2：直接定位并选中目标option #

如果方案1无效，可以直接找到对应value的option并设置选中状态：

$(".update-user").on('click', function(e) {
  e.preventDefault();
  var data = $(this).data("json");
  var $updateUserModal = $('#update-user-modal');

  for (key in data) {
    if (key === 'city') {
      $updateUserModal
        .find('select[name="city"] option[value="' + data[key] + '"]')
        .prop('selected', true);
    } else {
      $updateUserModal
        .find('[name="' + key + '"]')
        .val(data[key]);
    }
  }
});

方案3：确保模态框渲染完成后赋值 #

如果是模态框未加载完成导致的问题，可借助模态框的显示完成事件执行赋值（以Bootstrap模态框为例）：

$(".update-user").on('click', function(e) {
  e.preventDefault();
  var data = $(this).data("json");
  var $updateUserModal = $('#update-user-modal');

  $updateUserModal.modal('show').on('shown.bs.modal', function() {
    for (key in data) {
      $updateUserModal
        .find('[name="' + key + '"]')
        .val(String(data[key]));
    }
    // 解绑事件避免重复触发
    $(this).off('shown.bs.modal');
  });
});

验证步骤 #

1. 打印data.city的类型：console.log(typeof data.city)，确认是否为数字类型
2. 检查HTML中<option>的value属性是否为字符串格式
3. 优先测试方案1，该方案最简洁高效

内容的提问来源于stack exchange，提问作者F. Dakia