我想要实现的事情是,每当<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。
我需要根据选择显示一个不同的div
这就是如何使用jquery和es6语法来做到这一点
HTML
<select class="reveal">
<option disabled selected value>Select option</option>
<option value="value1" data-target="#target-1" >Option 1</option>
<option value="value2" data-target="#target-2" >Option 2</option>
</select>
<div id="target-1" style="display: none">
option 1
</div>
<div id="target-2" style="display: none">
option 2
</div>
JS
$('select.reveal').each((i, element)=>{
//create reference variable
let $option = $('option:selected', element)
$(element).on('change', event => {
//get the current select element
let selector = event.currentTarget
//hide previously selected target
if(typeof $option.data('target') !== 'undefined'){
$($option.data('target')).hide()
}
//set new target id
$option = $('option:selected', selector)
//show new target
if(typeof $option.data('target') !== 'undefined'){
$($option.data('target')).show()
}
})
})
我知道这是一个旧的线程,但我想我可以添加一点额外的。在我的情况下,我想传递文本,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的副本,而不是它的实例。