动态添加表格行时Bootstrap selectpicker无法正常渲染问题

• 动态拼接的<select>标签缺少selectpicker类，和静态渲染行的select配置不一致，Bootstrap Select插件无法识别待初始化的目标元素。
• selectpicker的刷新逻辑存在两个错误：一是仅在表格无初始行的分支中执行，已有行追加新行时完全没有触发插件渲染；二是错误将外层.search_selectdiv作为selectpicker的初始化对象，插件实际需要绑定在<select>元素上才能生效。
• Bootstrap Select默认仅在页面首次加载时，对页面中已存在的带selectpicker类的元素执行一次渲染，后续动态插入DOM的元素不会被自动初始化，必须手动调用渲染方法。

1. 修正动态拼接的select标签class属性，补上selectpicker类，和静态行配置保持一致。
2. 修正HTML拼接错误：删除多余的引号、移除闭合td标签上的无效属性，避免DOM结构错乱导致插件渲染失败。
3. 将selectpicker初始化逻辑移到DOM插入完成后，无论首次加行还是追加行都执行，且直接针对新插入的select元素调用渲染方法，避免全局刷新影响已存在的下拉框。

替换原addRow函数ajax请求success回调中的对应代码即可：

success: function (response) {
  $("#addRowBtn").button("reset");

  var tr =
    '<tr id="row' + count + '" class="' + arrayNumber + '">' +
    "<td>" +
    '<div class="form-group">' +
    '<div class="search_select">' +
    // 补充selectpicker类
    '<select class="form-control selectpicker" data-live-search="true" name="productName[]" id="productName' + count + '" onchange="getProductData(' + count + ')" >' +
    '<option value="">~~SELECT~~</option>';

  $.each(response, function (index, value) {
    tr += '<option value="' + value[0] + '">' + value[1] + "</option>";
  });

  tr +=
    "</select>" +
    "</div>" +
    "</div>" +
    "</td>" +
    // 修正原代码中td标签多余引号、闭合标签带属性的错误
    '<td style="padding-left:20px;">' +
    '<input type="text" name="rate[]" id="rate' + count + '" autocomplete="off" disabled="true" class="form-control" />' +
    '<input type="hidden" name="rateValue[]" id="rateValue' + count + '" autocomplete="off" class="form-control" />' +
    '</td>' +
    '<td style="padding-left:20px;">' +
    '<div class="form-group">' +
    '<input type="number" name="quantity[]" id="quantity' + count + '" onkeyup="getTotal(' + count + ')" autocomplete="off" class="form-control" min="1" />' +
    "</div>" +
    "</td>" +
    '<td style="padding-left:20px;">' +
    '<input type="text" name="total[]" id="total' + count + '" autocomplete="off" class="form-control" disabled="true" />' +
    '<input type="hidden" name="totalValue[]" id="totalValue' + count + '" autocomplete="off" class="form-control" />' +
    "</td>" +
    "<td>" +
    '<button class="btn btn-default removeProductRowBtn" type="button" onclick="removeProductRow(' + count + ')"><i class="glyphicon glyphicon-trash"></i></button>' +
    "</td>" +
    "</tr>";

  // 统一插入行逻辑
  if (tableLength > 0) {
    $("#productTable tbody tr:last").after(tr);
  } else {
    $("#productTable tbody").append(tr);
  }

  // 针对新插入的select单独初始化selectpicker
  $("#productName" + count).selectpicker('render');
}

注意：需要确保页面已经提前引入Bootstrap Select的CSS和JS文件，否则selectpicker方法会报错。

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