使用javascript动态创建Optgroup

我试图创造动态。我使用ajax请求获取数据，并希望将其排序显示。它还将收到类别名称。我当前的结果是它正在排序，但它正在生成一个新的optgroup，而不是将其添加到旧的optgroup中 （）

$。每个（响应、函数（索引、值）{
如果（值['categories\u name']！=当前子项）{
console.log（当前_sub）；
if（当前_sub）{
tr+=''
}
tr+=”；
当前_sub=值['categories_name']；
}
tr+=''+值['product_name']+''；
});
tr+=''；

您可以添加一些HTML和响应值吗？感谢您的建议：首先将数据放入分类结构（如

{category\u name:[…]}

）中，然后生成HTML。这样会更容易。

$.each(response, function(index, value) {

  if (value['categories_name'] != current_sub) {
    console.log(current_sub);
    if (current_sub) {
      tr += '</optgroup>'
    }
    tr += "<optgroup label='" + value['categories_name'] + "'>";
    current_sub = value['categories_name'];

  }

  tr += '<option value="' + value['product_id'] + '">' + value['product_name'] + '</option>';
});
tr += '</optgroup>';