Jquery, how to get previous selected dropdown value for multiple dropdowns using the same class?

Question

Currently using Jquery Repeater , so I may have multiple dropdowns depending on how many the users added dropdowns.

My goal is to get previous selected dropdown value for each of individual dropdowns after it is changed.

But the problem is, I'm using the same class so it read the value that whichever I changed.

 $(document).ready(function() { var show_previous_1; $('.rank').on('focus', function () { show_previous_1 = this.value; }) $(document).on('change keyup', '.rank', function() { $('#show_previous_1').text(show_previous_1); show_previous_1 = this.value; }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="rank"> <option value="0">-Select Your Rank-</option> <option value="1">Airman</option> <option value="2">Senior Airman</option> </select> <br> <br> <span id="show_previous_1"></span> <br> <br> <select class="rank"> <option value="0">-Select Your Rank-</option> <option value="1">Airman</option> <option value="2">Senior Airman</option> </select> <span id="show_previous_2"></span> 

http://jsfiddle.net/rht15dzy/

Answer 1

Now you can get Value of any Selected one by using span id

 $('.rank').on('focus ', function() { $(this).next().text($(this).val()) }) $(document).on('change keyup', '.rank', function() { $(this).next().next().text($(this).val()) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="rank"> <option value="0">-Select Your Rank-</option> <option value="1">Airman</option> <option value="2">Senior Airman</option> </select> Last :<span id="show_previous_a1"></span> Now :<span id="show_previous_a2"></span> <br> <br> <select class="rank"> <option value="0">-Select Your Rank-</option> <option value="1">Airman</option> <option value="2">Senior Airman</option> </select> Last :<span id="show_previous_b1"></span> Now : <span id="show_previous_b2"></span> 

Answer 2

Id-free solution based on two elements: .rank - for our dropdowns and .show-rank for output previous values. You can have as many dropdowns with output as you wish.

 $(document).ready(function() { // array of previously selected items for all items with class 'rank' var previously_selected=[]; $(document).on('change', '.rank', function() { // find next closest output with class 'rank-show' for current dropdown var output=$(this).nextAll('.rank-show')[0]; // current doprdown index by class 'rank' var dropdownIndex=$(this).parent().children('.rank').index(this); if (typeof previously_selected[dropdownIndex] !== 'undefined') { //output previous value $(output).text(previously_selected[dropdownIndex]); } else { //output 0 as default previous value $(output).text(0); } // set current value as previous for next dropdown change previously_selected[dropdownIndex]=$(this).val(); }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="rank"> <option value="0">-Select Your Rank-</option> <option value="1">Airman</option> <option value="2">Senior Airman</option> </select> <br> <br> <span class="rank-show"></span> <br> <br> <select class="rank"> <option value="0">-Select Your Rank-</option> <option value="1">Airman</option> <option value="2">Senior Airman</option> </select> <span class="rank-show"></span> <br/> <br/> <select class="rank"> <option value="0">-Select Your Rank-</option> <option value="1">Airman</option> <option value="2">Senior Airman</option> </select> <span class="rank-show"></span> <br/> <br/> <select class="rank"> <option value="0">-Select Your Rank-</option> <option value="1">Airman</option> <option value="2">Senior Airman</option> <option value="3">Senior Birdman</option> </select> <span class="rank-show"></span> 

Answer 3

First get the array of all the select dropdowns. Attach change listener to the dropdown and when changed find the index of changed select and then you can get the value of previously selected dropdown using index-1

 const selects = $('select'); $('select').on('change', function() { const index = selects.index($(this)); if(index !== 0) { console.log("Previous dropdown value", selects[index-1].value); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="rank"> <option value="0">-Select Your Rank-</option> <option value="1">Airman</option> <option value="2">Senior Airman</option> </select> <br> <br> <span id="show_previous_1"></span> <br> <br> <select class="rank"> <option value="0">-Select Your Rank-</option> <option value="1">Airman</option> <option value="2">Senior Airman</option> </select> <span id="show_previous_2"></span>