jQuery，如何使用同一类为多个下拉菜单获取先前选择的下拉列表值？

Question

当前使用的是Jquery Repeater ，所以我可能有多个下拉菜单，具体取决于有多少用户添加了下拉菜单。

我的目标是为更改后的每个下拉菜单获取先前选择的下拉菜单值。

但是问题是，我使用的是同一个类，因此它会读取我更改的值。

 $(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

现在，您可以使用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解决方案： .rank用于我们的下拉菜单， .show-rank用于输出先前的值。 您可以根据需要选择任意数量的下拉菜单。

 $(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

首先获取所有select下拉列表的数组。 将change侦听器附加到下拉列表，并在更改后找到更改后的select的索引，然后可以使用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>