我想要实现的事情是,每当<select>下拉菜单被更改时,我想要更改前的下拉菜单的值。我使用1.3.2版本的jQuery和使用的变化事件,但我在那里得到的值是变化后。

<select name="test">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>

让我们说当前选项My现在被选中,当我在onchange事件中将其更改为堆栈时(即当我将其更改为堆栈时),我想要它之前的值,即在这种情况下我的期望。

如何实现这一目标?

编辑:在我的情况下,我有多个选择框在同一页,并希望同样的事情被应用到所有他们。也所有我的选择后插入页面加载通过ajax。


当前回答

在编写下拉“on change”动作函数之前,将当前选中的jquery下拉值保存在全局变量中。 如果你想在函数中设置之前的值,你可以使用全局变量。

//global variable
var previousValue=$("#dropDownList").val();
$("#dropDownList").change(function () {
BootstrapDialog.confirm(' Are you sure you want to continue?',
  function (result) {
  if (result) {
     return true;
  } else {
      $("#dropDownList").val(previousValue).trigger('chosen:updated');  
     return false;
         }
  });
});

其他回答

手动跟踪值。

var selects = jQuery("select.track_me");

selects.each(function (i, element) {
  var select = jQuery(element);
  var previousValue = select.val();
  select.bind("change", function () {
    var currentValue = select.val();

    // Use currentValue and previousValue
    // ...

    previousValue = currentValue;
  });
});

有几种方法可以达到你想要的结果,以下是我的拙见:

让元素保持之前的值,因此添加属性'previousValue'。

<select id="mySelect" previousValue=""></select>

初始化后,'previousValue'现在可以用作属性。在JS中,要访问这个select的previousValue:

$("#mySelect").change(function() {console.log($(this).attr('previousValue'));.....; $(this).attr('previousValue', this.value);}

使用'previousValue'后,将属性更新为当前值。

我知道这是一个旧的线程,但我想我可以添加一点额外的。在我的情况下,我想传递文本,val和其他一些数据attr。在这种情况下,最好将整个选项存储为prev值,而不仅仅是val值。

示例代码如下:

var $sel = $('your select');
$sel.data("prevSel", $sel.clone());
$sel.on('change', function () {
    //grab previous select
    var prevSel = $(this).data("prevSel");

    //do what you want with the previous select
    var prevVal = prevSel.val();
    var prevText = prevSel.text();
    alert("option value - " + prevVal + " option text - " + prevText)

    //reset prev val        
    $(this).data("prevSel", $(this).clone());
});

编辑:

我忘记在元素上添加.clone()。如果不这样做,当你试图回拉值时,你最终会拉入选择的新副本,而不是以前的副本。使用clone()方法存储select的副本,而不是它的实例。

下面是一个简单的解决方案,没有jQuery、DOM遍历、事件绑定、全局变量等开销。它提示用户用包含“before”和“after”值的消息确认更改,并根据用户的选择取消或接受更改。

<select name="test" 
  onfocus="handleOnFocus(this);" 
  onchange="if(handleOnChange(this) == false) { return false; }"
  data-original-selected-index="">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>


// Prompt user to confirm the change
function handleOnChange(selectObj) {
  var confirmationMessage = 'Change ' +
    selectObj.options[selectObj.dataset.originalSelectedIndex].text + 
    ' to ' + 
    selectObj.options[selectObj.selectedIndex].text + '?';

  if (!confirm(confirmationMessage)) {
    selectObj.selectedIndex = selectObj.dataset.originalSelectedIndex;
    return false;
  } else {
    selectObj.dataset.originalSelectedIndex = selectObj.selectedIndex;
    return true;
  }
}

// Initialize original selected index (one-time)
function handleOnFocus(selectObj) {
  if (selectObj.dataset.originalSelectedIndex == '') {
    selectObj.dataset.originalSelectedIndex = selectObj.selectedIndex;
  }
}

JSFiddle在这里: https://jsfiddle.net/humbads/f3a0v8ys/

注1:onchange处理程序是这样编写的,所以这个解决方案也可以与ASP一起工作。Net下拉列表控件与AutoPostBack=True和OnSelectedIndexChanged处理程序。

注意2:选项不应该包含空值。如果存在,则更改初始值。

var last_value; var current_value; $(document).on("click","select",function(){ last_value = $(this).val(); }).on("change","select",function(){ current_value = $(this).val(); console.log('last value - '+last_value); console.log('current value - '+current_value); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="test"> <option value="stack">Stack</option> <option value="overflow">Overflow</option> <option value="my">My</option> <option value="question">Question</option> </select>