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>

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

1 个答案: