我想要实现的事情是，每当<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()
}
})
})
其他回答
(function() {
var value = $('[name=request_status]').change(function() {
if (confirm('You are about to update the status of this request, please confirm')) {
$(this).closest('form').submit(); // submit the form
}else {
$(this).val(value); // set the value back
}
}).val();
})();
将它存储在一个self属性中(在文档就绪时):
$('#myselect').attr('orig',$('#myselect').val());
然后与变化后的值进行比较:
if ($('#myselect').attr('orig')!=$('#myselect').val()) ...
我需要根据选择显示一个不同的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()
}
})
})
请不要为此使用全局变量—将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值在选择的数据
$("#dropdownId").on('focus', function () {
var ddl = $(this);
ddl.data('previous', ddl.val());
}).on('change', function () {
var ddl = $(this);
var previous = ddl.data('previous');
ddl.data('previous', ddl.val());
});
