我想要实现的事情是,每当<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。


当前回答

手动跟踪值。

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;
  });
});

其他回答

我想为解决这个问题贡献另一种选择;因为上面提出的解决方案并没有解决我的情况。

(function()
    {
      // Initialize the previous-attribute
      var selects = $('select');
      selects.data('previous', selects.val());

      // Listen on the body for changes to selects
      $('body').on('change', 'select',
        function()
        {
          $(this).data('previous', $(this).val());
        }
      );
    }
)();

这确实使用了jQuery,所以def.在这里是一个依赖项,但这可以在纯javascript中进行调整。(在body中添加监听器,检查原始目标是否为select, execute函数,…)

通过将更改侦听器附加到主体,您几乎可以确定它将在特定的侦听器之后触发选择,否则'data-previous'的值将在您甚至可以读取它之前被覆盖。

当然,这是假设您更喜欢为set-previous和check-value使用单独的侦听器。它正好符合单一责任模式。

注意:这将把“先前”功能添加到所有选择中,所以如果需要,请确保对选择器进行微调。

请不要为此使用全局变量—将prev值存储在数据中 这里有一个例子:http://jsbin.com/uqupu3/2/edit

参考代码:

$(document).ready(function(){
  var sel = $("#sel");
  sel.data("prev",sel.val());

  sel.change(function(data){
     var jqThis = $(this);
     alert(jqThis.data("prev"));
     jqThis.data("prev",jqThis.val());
  });
});

刚刚看到你在页面上有很多选择-这种方法也适用于你,因为对于每个选择,你将存储prev值在选择的数据

最好的解决办法:

$('select').on('selectric-before-change', function (event, element, selectric) {
    var current = element.state.currValue; // index of current value before select a new one
    var selected = element.state.selectedIdx; // index of value that will be selected

    // choose what you need
    console.log(element.items[current].value);
    console.log(element.items[current].text);
    console.log(element.items[current].slug);
});

将焦点事件与更改事件结合起来以实现您想要的结果:

(function () {
    var previous;

    $("select").on('focus', function () {
        // Store the current value on focus and on change
        previous = this.value;
    }).change(function() {
        // Do something with the previous value after the change
        alert(previous);

        // Make sure the previous value is updated
        previous = this.value;
    });
})();

工作示例:http://jsfiddle.net/x5PKf/766

下面是一个简单的解决方案,没有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:选项不应该包含空值。如果存在,则更改初始值。