多个文本框填充jQuery中具有相同类的下拉选择

Question

我使用了多个具有相同类的文本框的概念，并使用了多个具有相同类的多个下拉选项选择。我遇到了问题。当我单击第一个下拉选项时，它将更改第二个文本框的值。我单击第一个下拉选项，它将更改其他第一个文本框的值；如果单击第二个下拉选项，它将更改第二个文本框的值。

<form action="" method="post"> 
    <select name="drop[]" id="budget" class="drop"> 
        <option value="1">option1</option> 
        <option value="2">option2</option>
        <option value="3">option3</option> 
    </select>
    <input type="text" name="txt" id="txt" class="txt" value="text1"><br> 
    <select name="drop[]" id="budget1" class="drop"> 
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option> 
    </select>
    <input type="text" name="txt" id="txt1" class="txt" value="text2">

</form> 

$('input[name="txt"]').each(function () { 
    $('.drop').on('change', function(){
        var total = $(this).val();
        $('input[name="txt"]').val($(this).find("option:selected").attr("value")); 
    });
});

Answer 1

您需要找出在更改选择元素时应更新的下一个输入元素。 您可以使用下面的代码来实现。

    $('.drop').on('change', function(){
        var total = $(this).val();
        $(this).next("input:first").val($(this).find("option:selected").attr("value")); 
    });

柱塞： https ://plnkr.co/edit/qFjuFtwhHBvDE9zxAup2 ? p = preview