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>