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

现在，您可以通过使用跨度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>

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

3 个答案: