0

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>

Edited by Babita_1

2
Contributors
1
Reply
17
Views
1 Year
Discussion Span
Last Post by hielo
0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.