javascript - jquery增加select输入的ID

Question

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

选择输入字段存储在varindirectSelect

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

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

HTML 存储在 varindirectSelect

中

<select name="indirect" id="indirect_0" class="form-control">
  <option value=""></option>
  <option value="8002">Controle ( indirekt )</option>
  <option value="9000">Indirekte uren produktie afdeling</option>
  <option value="9010">Leerschool</option>
  <option value="9020">Opleidingen en trainingen</option>
  <option value="9050">Div. indirekte taken</option>
  <option value="9075">Systeembeheer</option>
  <option value="9900">Stroomstoring</option></select>
</select

完整代码

$(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
    });
});

Answer 1

您的indirectSelect是来自PHP的简单字符串

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

尝试:

$("#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>';