Mehrere Textfelder füllen die Dropdown-Auswahl mit der gleichen Klasse in Jquery

Question

Ich habe das Konzept der mehrere Textfelder mit der gleichen Klasse füllen mit der mehrere Dropdown-Option Auswahl, die auch die gleiche Klasse.Ich habe Probleme in it.when ich klicken Sie auf die erste Drop-Down-Option, dann ändern Sie den zweiten Textbox Wert. Ich möchte, dass, wenn ich auf die erste Dropdown-Option klickt ändert die Werte der ersten Textbox nicht andere oder wenn Sie auf die zweite Dropdown-Option klicken, wird es den Wert der zweiten Textbox ändern.

<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

Sie benötigen das nächstes Eingabeelement, um herauszufinden, die aktualisiert werden sollen, wenn Sie ein ausgewähltes Element ändern. Sie können den folgenden Code verwenden, um dies zu erreichen.

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

Plunker: https://plnkr.co/edit/qFjuFtwhHBvDE9zxAup2?p=preview