使用jQuery在选择框中获取之前选择的项目

Question

我有一个单独的项目HTML选择框，我想知道在将选择更改为新项目之前选择了哪个项目。

通过改变事件被触发的时候，就已经太迟了：

$("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”事件类型..

是一个跨浏览器兼容的方式这是可行的没有很多箍跳？

Answer 1

这应该捕捉值在改变之前。只要用户打开选择菜单，但在他们真正选择某个选项之前，该值就会被抓取。

 $(document).ready(function(){ 
      $('select').focus(function(){ 
       var theValue = $(this).attr('value'); 
      }); 
    }); 

Answer 2

只是一个想法，但不是你一旦处理了改变事件，就将该值设置为某个变量，那么下次你处理它时，你会得到那个值吗？

Answer 3

你可以做这样的事情

$(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; 
} 

Answer 4

下面是一个使用。对

$('#form-id').on('focus','select',function(){ 
var previous = $(this).children('option').filter(':selected').val(); 
}); 

然而，对于我想要的东西来实现，上面太松了，我需要的是在初始页面输出选择的值上最新的解决方案因为在提交表单数据之前，用户多次更改它之后，上述操作会给我提供不正确的值。

我的解决办法是“前”属性添加到填充输出值选择元素，然后改变它从阿贾克斯一个“成功”的结果保存时：

<select name="status" id="status" previous="D"> ... </select> 

然后根据用户按下取消确认弹出按钮或存在是一个Ajax错误我只是做：

$('#status').val($('#status').attr('previous')).attr('selected',true); 

，如果在阿贾克斯“成功”的“上一个”属性更改为新的成功保存价值：

$('#status').attr('previous',$('#status').children('option').filter(':selected').val()); 

适用于单个表单元素，但我需要一个适应，其中我有一个账户列表，每个账户都有一个账户状态设置选择菜单，该菜单触发一个jQuery UI对话框，该对话框依次解析Ajax调用以保存设置，使用从选择菜单中填入具有一组字段的单个隐藏表格。on（'change'）

下面是一个选择菜单（唯一的ID通常会被使用，但在我的情况下有一些服务器端的原因，为什么我不能使用它们，因此这次结合使用属性“相对”和“型”的，同样的代码将更改保存到不同的数据库表）：

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

这里是j查询用户界面对话框代码：

$('#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'); 
      } 
     } 
    });