我有一个单项 HTML 选择框，我想在其中找出在将选择更改为新项目之前选择了哪些项目。
当 change 事件被触发时，已经太晚了：
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
// this will get me the current selected item (the new one)
str += $(this).text() + " "; });
})
文档说“当控件失去输入焦点并且其值在获得焦点后已被修改时，会触发更改事件。”
但是，捕获“模糊”事件似乎也不是正确的事件，并且没有“onFocusLost”类型的事件..
这在跨浏览器兼容的方式下是否可行，而无需大量跳跃？
【问题讨论】：
标签： jquery selecteditem drop-down-menu
这应该在值更改之前捕获它。一旦用户打开选择菜单，但在他们实际选择某些内容之前，该值将被抓取。
$(document).ready(function(){
$('select').focus(function(){
var theValue = $(this).attr('value');
});
});
【讨论】：
只是一个想法，但你不能在处理更改事件后将值设置为某个变量，以便下次处理它时，你会有那个值吗？
【讨论】：
你可以这样做
$(document).ready(function() {
$("select").each(function(){
var str = getSelectedText(this);
$(this).data('selected',str);
}).change(function () {
var str = getSelectedText(this);
var selectedbefore = $(this).data('selected');
$(this).data('selected',str);
});
});
function getSelectedText(obj){
var str = "";
$(obj).closest('select').find("option:selected").each(function () {
str += $(this).text() + " ";
});
return str;
}
【讨论】：
这是使用 .on 的最新解决方案
$('#form-id').on('focus','select',function(){
var previous = $(this).children('option').filter(':selected').val();
});
但是对于我想要实现的目标，上面的内容太松散了，我需要在初始页面输出中选择的值，因为在用户在提交表单数据之前多次更改它之后，上面会给出不正确的值.
我的解决方案是在 select 元素中添加一个“previous”属性，并在输出中填充值，然后在保存时根据 Ajax 的“成功”结果更改它：
<select name="status" id="status" previous="D"> ... </select>
然后，当用户在确认弹出窗口上按下取消按钮或出现 Ajax 错误时，我刚刚做了：
$('#status').val($('#status').attr('previous')).attr('selected',true);
如果在 Ajax “成功”时将“previous”属性更改为新的成功保存的值：
$('#status').attr('previous',$('#status').children('option').filter(':selected').val());
适用于单个表单元素，但我需要进行调整，其中我有一个帐户列表，每个帐户都有一个帐户状态设置选择菜单，该菜单触发一个 jQuery UI 对话框，进而破译 Ajax 调用以保存设置，A使用 .on('change')
使用选择菜单中的值填充具有一组字段的单个隐藏表单这是其中一个选择菜单（通常会使用唯一 ID，但在我的情况下，有几个服务器端原因我这次不能使用它们，因此结合使用属性“rel”和“ type”，相同的代码将更改保存到不同的数据库表）：
<select name="status" rel="23" type="company" previous="P">
<option value="P" selected="selected">Pending</option>
<option value="D">Deactivated</option>
<option value="A">Activated</option>
</select>
因为脚本中有 3 个点可能会发生失败和一个成功，所以创建一个函数是有意义的：
function set_select(saved)
{
var e = $(':input[type="'+$('#status-type').val()+'"][rel="'+$('#status-id').val()+'"]');
if(saved) e.attr('previous',e.children('option').filter(':selected').val());
e.val( e.attr('previous') ).attr('selected',true);
};
这里是 jQuery UI 对话框代码：
$('#update-confirm').dialog({
autoOpen:false,
resizable:false,
height:230,
modal:true,
buttons:{
"Change": function(){
var exec = false;
$dialog = $(this);
switch($('#status-type').val())
{
default: set_select(false); break;
case 'company': exec = 'save-company-status'; break;
case 'user': exec = 'save-user-status'; break;
};
if(exec)
{
$.ajax({
type: 'POST',
url: '/sys.manager/apps.manager.php?do='+exec,
data: $('#form-status').serialize(),
success: function(response)
{
if(!response.result || response.result == 'false')
{
console.log('Fail');
set_select(false);
} else {
console.log(response.result);
console.log(response.mail);
$dialog.dialog('close');
set_select(true);
}
},
error: function(response) {
set_select(false);
}
});
};
},
Cancel: function() {
set_select(false);
$(this).dialog('close');
}
}
});
【讨论】：