我想要实现的事情是,每当<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。
我知道这是一个旧的线程,但我想我可以添加一点额外的。在我的情况下,我想传递文本,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的副本,而不是它的实例。
我选择Avi Pinto的解决方案,它使用jquery.data()
使用焦点并不是一个有效的解决方案。它在你第一次改变选项时起作用,但如果你停留在选择元素上,并按“上”或“下”键。它不会再次通过焦点事件。
所以解应该是这样的,
//set the pre data, usually needed after you initialize the select element
$('mySelect').data('pre', $(this).val());
$('mySelect').change(function(e){
var before_change = $(this).data('pre');//get the pre data
//Do your work here
$(this).data('pre', $(this).val());//update the pre data
})
这是对@thisisboris的回答的改进。它将当前值添加到数据中,因此代码可以控制设置为当前值的变量何时被更改。
(function()
{
// Initialize the previous-attribute
var selects = $( 'select' );
$.each( selects, function( index, myValue ) {
$( myValue ).data( 'mgc-previous', myValue.value );
$( myValue ).data( 'mgc-current', myValue.value );
});
// Listen on the body for changes to selects
$('body').on('change', 'select',
function()
{
alert('I am a body alert');
$(this).data('mgc-previous', $(this).data( 'mgc-current' ) );
$(this).data('mgc-current', $(this).val() );
}
);
})();
我想为解决这个问题贡献另一种选择;因为上面提出的解决方案并没有解决我的情况。
(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使用单独的侦听器。它正好符合单一责任模式。
注意:这将把“先前”功能添加到所有选择中,所以如果需要,请确保对选择器进行微调。