Question

我正在使用jquery并需要帮助来计算依赖于动态插入的select选项的输入值。我想如果选择值是借记，它将从选定的信用值中减去，差异显示在id diff中，因为我插入了更多的所有值通过借方和贷方计算。

<table class="vtable">
    <tr>
        <td>Type</td>
        <td>Amount</td>
    </tr>
    <tr>
        <td>
            <select name="type" id="type">
            <option>-type -</option>
            <option value="debit">debit</option>
            <option value="credit">credit</option>
            </select>
        </td>
        <td><input type="text" id="amount"></td>
    </tr>
</table>

我的小提琴演示在下面

Demo

由于

Answer 1

DEMO

试试这个

$(document).on('change', 'select', function () {
        var value = $(this).val();
        var input = $(this).parents('td').next('td').find('input:text');
        if (value == 'debit') {
            total -= parseInt(input.val());
        } else if (value == 'credit') {
            total += parseInt(input.val());
        }
        $('#diff').html('Differance:' + total);
    });

希望这有帮助，谢谢

Answer 2

$('select#type').on('change', function() {
    if($(this).val() === "debit"){
        //Get the difference between 2 variables and store result in diff
        $("#diff").val(Math.abs(a - b)) 
    }else if($(this).val() === "credit"){
        //perform addition and store value in sum object
        $("#sum").val(x+y)
    } 
});

Answer 3

这样的事情怎么样？

$('select[name="type"]').change(function()
{
 if($(this).val() === 'credit')
 {
    $("#amount").val() += $('input[type="text"]').val()

 }
 else if($(this).val() === 'debit')
 {
    $("#amount").val() -= $('input[type="text"]').val()
 }
})

我使用change()函数来触发更改。我不知道这是不是你的意思，但我希望它有所帮助。

Answer 4

在more按钮点击处理程序中更正了一个问题。请参阅以下更改：

$("#more").click(function() {
  $(".vtable tr:last").clone().find("input, select").each(function() {
    $(this).attr({'id': function(_, id) { return id + 1 }});
  }).end().appendTo(".vtable");
});

为了处理动态添加的select和input文字的事件，您可以按照以下方式实现。

注意：.on()与您的表一起使用，因为您正在使用选择和输入文本动态添加行。

代表select：

$('.vtable').on('change', "select", function (e) {
    var valueSelected = this.value;
    alert(valueSelected);

});

代表input文字

$('.vtable').on('keyup', "input", function (e) {
    var valueEntered = this.value;
    alert(valueEntered );
});

jQuery动态创建输入和减去选择选项

4 个答案:

DEMO