如何用getElementsByName为动态表格行的下拉菜单添加选项

核心问题点 #

1. 重复ID与选择器错误：新增的每行select都用了相同的id="country"，HTML中ID必须唯一，后续新增的元素无法通过ID被正确选中；而且代码里用$("#ct")是错误的，你的select设置的是name="ct"但ID是country，这个选择器找不到任何元素。
2. 数组未初始化：var countr ;后直接给countr[ia]赋值会导致报错，需要先初始化为空数组var countr = [];。
3. Select2数据格式问题：Select2的data参数需要是包含id和text属性的对象数组，直接存字符串可能无法正常渲染。
4. DOM元素操作错误：getElementsByName('ct')返回的是元素集合，不能直接用.innerHTML；设置Select2值后需要触发change事件才能更新UI。

修正后的代码 #

$("#btn-add-row").click(function(){
    // 移除重复ID，改用class标识下拉框，避免冲突
    var row="<tr>  <td><select class='country-select' name='ct' style='width:275px;'></select></td> <td><input type='text' name='Count' class='form-control'></td> <td><input type='text' required name='Rate' class='form-control'></td> <td><input type='text'  name='Bprice' class='form-control' readonly></td> <td><input type='text' required name='Quantity' class='form-control'></td> <td><input type='text' required name='Total' class='form-control'></td> <td><input type='button' value='x' class='btn btn-danger btn-sm btn-row-remove'> </td>  </tr>";
    var $newRow = $(row).appendTo("#product_tbody");
    
    // 初始化数组并构建Select2要求的选项格式
    var countr = [];
    for(var ia=0; ia<data1.length; ia++){ 
        // 假设Product字段同时作为选项ID和显示文本，可根据实际结构调整
        countr.push({
            id: data1[ia].Product,
            text: data1[ia].Product
        });
    }

    // 针对刚新增的下拉框初始化Select2
    var $newSelect = $newRow.find(".country-select");
    $newSelect.select2({
        data: countr
    }); 

    // 设置值并触发change事件更新Select2界面
    $newSelect.val("testing").trigger("change");
});

关键修正说明 #

• 去掉重复ID，改用class="country-select"标识下拉框，避免全局ID冲突。
• 新增行后先保存行对象，直接定位该行内的下拉框，无需全局查找，效率更高。
• 正确初始化数组，并按照Select2要求的格式构建选项数据，保证下拉框正常渲染。
• 操作刚初始化的Select2实例，设置值后触发change事件（Select2的特殊要求，仅用val()不会更新界面）。
• 废弃无效的getElementsByName和错误的$("#ct")操作，改用精准的jQuery选择器。

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