跟踪多选选项的上一个值

Track previous value of multiple select option

本文关键字：上一个 选项 跟踪      更新时间：2023-09-26

我有这三个select，我想使用each保存以前选择的所有选项，我已经为其中一个选项保存了，但有没有办法做到这一点，而不为每个选项使用相同的代码？例如使用each。

jsFiddle

$(function() {
  var previous;
  $('#dropdown1').focus(function(e) {
    previous = $(this).val();
  });
  $('#dropdown1').change(function(e) {
    alert("previous value = " + previous + ", current value = " + $(this).val());
    previous = $(this).val();
  });
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<select id="dropdown1">
  <option>10</option>
  <option>20</option>
  <option>30</option>
</select>
<select id="dropdown2">
  <option>40</option>
  <option>50</option>
  <option>60</option>
</select>
<select id="dropdown3">
  <option>70</option>
  <option>80</option>
  <option>90</option>
</select>

使用数组为每个选择保留以前的值。并修改更改和焦点以针对所有选择元素，并引用/修改数组中它们各自先前的值：

var previous=[];
var selectelements = $('select');
$('select').focus(function(e){
   previous[$('select').index(this)] = $(this).val(); 
});
$('select').change(function(e){
    alert("previous value = " + previous[$('select').index(this)] + ", current value = " + $(this).val());
    previous[$('select').index(this)] = $(this).val();
});

工作演示

使用class选择器而不是ID

$(function(){
    var previous;
    
    $('.ddl').focus(function(e){
       previous = $(this).val(); 
    });
    
    $('.ddl').change(function(e){
        alert("previous value = " + previous + ", current value = " + $(this).val());
        previous = $(this).val();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown1" class="ddl">
    <option>10</option>
    <option>20</option>
    <option>30</option>
</select>
<select id="dropdown2" class="ddl">
    <option>40</option>
    <option>50</option>
    <option>60</option>
</select>
<select id="dropdown3" class="ddl">
    <option>70</option>
    <option>80</option>
    <option>90</option>
</select>

尝试使用数组

$(function() {
    var previous = [];
    $('#dropdown1').focus(function(e) {
        var data = $(this).val();
        previous.push(data);
    });
});

现在，所有更改都将保留在您的previous 中

更新：如果你想检索最后一个索引

$('#dropdown1').change(function(e) {
     var last_index_value = previous[previous.lenght];
     alert("previous value = " + last_index_value + ", current value = " + $(this).val());
     previous.push($(this).val());

})；

相关文章：