从JSON填充后Dropdown无法更新，编程设置选中项失败

核心问题是异步请求的时序错误：$.getJSON是异步操作，它的回调函数会在JSON数据加载完成后才执行，但你设置选中项的代码是同步执行的——这意味着设置代码运行时，下拉框的填充逻辑还没完成，所以你获取到的options.length只是初始状态的2个（你预添加的空选项+页面初始的另一个选项），自然无法正确选中目标项。

修复方案1：将选中逻辑移到异步回调内 #

直接把设置选中项的代码放到$.getJSON的回调函数末尾，确保下拉框填充完成后再执行选中操作：

let worksitelist = $('#element_14');
$.getJSON(lxw, function(data) {
  worksitelist.empty();
  worksitelist.prepend("<option value='' selected='selected'></option>");
  $.each(data, function(key, entry) {
    if (mylocal != entry.local) {
      return true;
    } else {
      worksitelist.append($('<option></option>').attr('value', entry.worksite).text(entry.worksite));
    }
  });

  // 在这里执行选中逻辑
  var t = document.getElementById('element_99');
  var w = t.value;
  // 用jQuery简化选中操作，不用手动循环
  worksitelist.find('option').filter(function() {
    return $(this).text() === w;
  }).prop('selected', true);
});

修复方案2：封装选中函数，按需调用 #

如果设置选中项的逻辑需要在其他时机触发（比如用户修改了输入框值），可以把选中逻辑封装成独立函数，然后在异步回调执行完成后调用，或者确保调用该函数时下拉框已经填充完毕：

// 封装选中函数
function setWorksiteSelected(targetValue) {
  let worksitelist = $('#element_14');
  worksitelist.find('option').filter(function() {
    return $(this).text() === targetValue;
  }).prop('selected', true);
}

// 填充下拉框的代码
let worksitelist = $('#element_14');
$.getJSON(lxw, function(data) {
  worksitelist.empty();
  worksitelist.prepend("<option value='' selected='selected'></option>");
  $.each(data, function(key, entry) {
    if (mylocal != entry.local) {
      return true;
    } else {
      worksitelist.append($('<option></option>').attr('value', entry.worksite).text(entry.worksite));
    }
  });

  // 填充完成后调用选中函数
  var t = document.getElementById('element_99');
  setWorksiteSelected(t.value);
});

// 后续需要时可直接调用setWorksiteSelected，比如输入框值变化时
// document.getElementById('element_99').addEventListener('change', function() {
//   setWorksiteSelected(this.value);
// });

额外提示 #

• 避免混用原生JS和jQuery的DOM操作，保持代码风格一致，减少出错概率。
• 如果你的下拉框是动态生成的（比如在表单插件内），可能需要检查是否有插件的初始化逻辑覆盖了你的操作，此时需要调用插件的更新方法来同步DOM状态。

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