Javascript Jquery增加select输入的ID

我想更改选择字段的ID 选择字段由PHP生成

选择输入字段存储在var indirectSelect中

虽然看起来很简单，但我无法改变它。 这就是我所尝试的：

$(indirectSelect).attr('id', 'indirect_'+counter);

存储在var indirectSelect中的HTML

完整代码

$(document).ready(function () {
    var counter = 0;
    var regex = /^(.*)(\d)+$/i;
    var indirectSelect = '<?php echo $select_6 ?>';

    $("#addExtraRow").on("click", function () {
        $(indirectSelect).attr('id', 'indirect_'+counter);

        var newRow = $("<tr id="+ counter +">");
        var cols = "";

        cols += "<td><div class='tooltip12'>";
        cols += "<input type='number' id='resourceid_<?php echo $ii; ?>' name='resourceid' class='form-control' value='' readonly>";
        cols += "<span class='tooltip12text'><div id = 'resourcedescr_" + counter + "''></div></span>";
        cols += "</div></td>";

        cols += '<td><input type="text" class="form-control" name="base' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="lot' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="split' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="sub' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="seq' + counter + '"/></td>';
        cols += '<td>'+indirectSelect+'</td>';
        cols += "<td><input type='date' id='datum_" + counter + "' name='datum' class='form-control' value=''></td>";
        cols += "<td><input type='time' step = '1' id='clockin_" + counter + "' name='clockin' class='form-control' value='' ></td>";
        cols += "<td><input type='time' step = '1' id='clockout_" + counter + "' name='clockout' class='form-control' value=''></td>";
        cols += "<td><input type='number' id='break_" + counter + "' name='break' class='form-control' value='' step='.01'></td>";
        cols += "<td><input type='number' id='worked_" + counter + "' name='worked' class='form-control' value='' readonly></td>";
        cols += "<td><input type='number' id='multiplier_" + counter + "' name='multiplier' class='form-control' value='100'></td>";

        cols += '<td><button class="btn btn-default resetRow" type="button"><i class="fa fa-refresh" aria-hidden="true"></i></button>';
        cols += '<button class="btn btn-outline btn-default ibtnDel" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></td>';
        cols += "</tr>";

        newRow.append(cols);
        $("table.extraFormRows").append(newRow);
        counter++;
    });

    $("table.extraFormRows").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();       
        counter -= 1
    });
});

您的indirectSelect是PHP中的简单字符串

$indirectSelect将字符串转换为内存中的jQuery对象，但您将不再使用它

尝试：

这只会给你tags@RicoKrouweel在执行.html时，您会得到元素的内部html。这就是为什么您需要将元素包装到其他元素，然后获得这个包装器HTML

$(document).ready(function () {
    var counter = 0;
    var regex = /^(.*)(\d)+$/i;
    var indirectSelect = '<?php echo $select_6 ?>';

    $("#addExtraRow").on("click", function () {
        $(indirectSelect).attr('id', 'indirect_'+counter);

        var newRow = $("<tr id="+ counter +">");
        var cols = "";

        cols += "<td><div class='tooltip12'>";
        cols += "<input type='number' id='resourceid_<?php echo $ii; ?>' name='resourceid' class='form-control' value='' readonly>";
        cols += "<span class='tooltip12text'><div id = 'resourcedescr_" + counter + "''></div></span>";
        cols += "</div></td>";

        cols += '<td><input type="text" class="form-control" name="base' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="lot' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="split' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="sub' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="seq' + counter + '"/></td>';
        cols += '<td>'+indirectSelect+'</td>';
        cols += "<td><input type='date' id='datum_" + counter + "' name='datum' class='form-control' value=''></td>";
        cols += "<td><input type='time' step = '1' id='clockin_" + counter + "' name='clockin' class='form-control' value='' ></td>";
        cols += "<td><input type='time' step = '1' id='clockout_" + counter + "' name='clockout' class='form-control' value=''></td>";
        cols += "<td><input type='number' id='break_" + counter + "' name='break' class='form-control' value='' step='.01'></td>";
        cols += "<td><input type='number' id='worked_" + counter + "' name='worked' class='form-control' value='' readonly></td>";
        cols += "<td><input type='number' id='multiplier_" + counter + "' name='multiplier' class='form-control' value='100'></td>";

        cols += '<td><button class="btn btn-default resetRow" type="button"><i class="fa fa-refresh" aria-hidden="true"></i></button>';
        cols += '<button class="btn btn-outline btn-default ibtnDel" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></td>';
        cols += "</tr>";

        newRow.append(cols);
        $("table.extraFormRows").append(newRow);
        counter++;
    });

    $("table.extraFormRows").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();       
        counter -= 1
    });
});

$("#addExtraRow").on("click", function () {
   var $indirectSelect = $(indirectSelect);
   $indirectSelect.attr('id', 'indirect_'+counter);

   ...

   // Wrap element in another element to get full inner HTML, otherwise it would be just <option> tags
   cols += '<td>' + $indirectSelect.wrap('<div>').html() + '</td>';