javascript - 自动递增动态文本框 div ID 和结果显示在来自另一个 jquery 的递增 div ID 中？

Question

我使用下面的脚本作为动态文本框。

<script type="text/javascript">
     var counter = 0;
    $(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");

        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
});

function GetDynamicTextBox() {

    return 'Item Code : <select name="iuname" id="iuname" class="required">' + <? php foreach($tItem as $row): ?>
        '<option value="<?php echo $row->ProductID;?>"><?php echo $row->ProductID;?></option>' + <? php endforeach; ?>
        '</select>' +
        ' Batch : <input id="buname" name="buname" >' +
        '<div id="ffinalResult' + counter + '" ></div>' +
        '<br/>'
    counter++;
}
</script>

当我从下拉列表中更改项目代码时，它将在 ID= ffinalresult 中显示结果。它完美地显示了第一个文本框的结果。但是当我更改下一个下拉列表时，它会在相同的 div= ffinalresult 中显示结果。但我想在不同的 div ID 中显示不同下拉值的结果。我使用计数器，但它不起作用。

<script>
    $(document).on('change', '#iuname', function() {
        var val = $(this).val();
        var text = $(this).find('option:selected').text();
        $("#ffinalResult").text(val);
    });
</script>

Answer 1

如果返回后增加计数器，则不会增加。

<script type="text/javascript">
    var counter = 0;
    $(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");

        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
});

function GetDynamicTextBox() {
   counter++;
    return 'Item Code : <select name="iuname" id="iuname" class="required">' + <? php foreach($tItem as $row): ?>
        '<option value="<?php echo $row->ProductID;?>"><?php echo $row->ProductID;?></option>' + <? php endforeach; ?>
        '</select>' +
        ' Batch : <input id="buname" name="buname" >' +
        '<div class="ffinalResult" rel="' + counter + '" ></div>' +
        '<br/>'

}
</script>