Ajax动态生成Select下拉框仅最后一个可预设选中值如何解决

问题核心原因 #

你代码的核心问题出在table.innerHTML += row这行操作。每次使用+=拼接innerHTML时，浏览器会先把当前table内所有已存在的DOM元素全部清空，再把拼接后的完整HTML字符串重新解析为DOM节点。也就是说你之前循环里给前面的select设置的选中状态，会在你下一次执行innerHTML += row的时候直接被重置，只有最后一次循环设置的选中值不会被后续操作覆盖，所以才会出现只有最后一个select生效的情况。

另外你原代码里所有select都写死了id="183"，同一个页面内ID重复属于非法DOM结构，也可能导致选择器匹配异常，建议删除固定ID或者改为动态绑定addressCode作为ID。

修复方案 #

方案1：先拼接所有行HTML，一次性插入后批量设置选中状态

先把所有行的HTML字符串拼在一个变量里，全部拼完后一次性赋值给table.innerHTML，最后再遍历一次给每个select设置选中值，避免多次修改innerHTML导致的DOM重置问题：

var table = document.getElementById('addressList')
// 声明变量存储所有行的HTML
var allRows = ''
// 第一次循环拼接所有行
for (var i = 0; i < response.address_details.length; i++){
  var addressCode = response.address_details[i].address_code
  allRows += `
  <tr id="${addressCode}">
    <td>${response.address_details[i].address}</td>
    <td>${addressCode}</td>
    <td>${response.address_details[i].frequency}</td>
    <td>
      <select name="${addressCode}" class="address_code">
        <option value="0">Not regular</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </td>
  </tr>`
}
// 一次性插入所有行
table.innerHTML = allRows
// 第二次循环批量设置选中
for (var i = 0; i < response.address_details.length; i++){
  var addressCode = response.address_details[i].address_code
  $(`[name="${addressCode}"]`).val('2')
}

方案2：用DOM节点追加代替innerHTML拼接

使用jQuery的append方法追加节点，不会清空已有DOM的状态，可直接在单次循环内完成插入和设置操作：

var table = document.getElementById('addressList')
for (var i = 0; i < response.address_details.length; i++){
  var addressCode = response.address_details[i].address_code
  var row = `
  <tr id="${addressCode}">
    <td>${response.address_details[i].address}</td>
    <td>${addressCode}</td>
    <td>${response.address_details[i].frequency}</td>
    <td>
      <select name="${addressCode}" class="address_code">
        <option value="0">Not regular</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </td>
  </tr>`
  // 追加节点不会重置已有DOM状态
  $(table).append(row)
  $(`[name="${addressCode}"]`).val('2')
}

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