Hello Everyone,I have used the concept of multiple textboxes having same class fill with the multiple dropdown option selection which also having same class.I have facing problems in it.when i click the first dropdown option then it change the second textbox value.I want that if i click on first dropdown option it changes the values of first textbox not other or if click the second dropdown option it will change the value of second textbox.

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
</head>
<body> 
<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">
<input type="submit" value="save" name="submit" class="submit"> </form> 
<script>

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

    });
  });
</script> </body> </html>

From what I see, the input and the corresponding select can be "tied/related" to each other by inspecting their id attributes. By removing the non-numeric portion of the id, whatever is left helps you the determine the id of the corresponding element. Since ids must be unique, the previous method helps you identify the unique corresponding element. Try:

 <script>
  $('input[name="txt"]').each(function () { 
          var id_suffix = this.id.replace(/\D/g,'');
          $('#budget'+id_suffix).on('change', function(){
          var total = $(this).val();
         $('#txt'+id_suffix).val($(this).find("option:selected").attr("value")); 
    });
 });
 </script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.