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() + " "; });          
})

文档说'当控件失去输入焦点时，更改事件将触发，并且自获得焦点后其值已被修改。'

然而，捕获'blur'事件似乎也不是正确的事件，并且没有“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

这是使用.on

的最新解决方案

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

然而，对于我想要实现的目标，上面的内容太松了，我需要在初始页面输出中选择的值，因为在用户在提交表单数据之前多次更改它之后上面会给出错误的值

我的解决方案是将“previous”属性添加到用输出值填充的select元素，然后在保存时从Ajax的“success”结果中更改它：

<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”和“输入“，相同的代码保存对不同数据库表的更改”：

<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 Dialog代码：

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

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

4 个答案: