4

我有一个单项 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”类型的事件。

这在跨浏览器兼容的方式下是否可行，没有很多箍跳？

4

4 回答 4

5

这应该在值更改之前捕获该值。一旦用户打开选择菜单，但在他们实际选择某些内容之前，该值将被获取。

        $(document).ready(function(){
            $('select').focus(function(){
                var theValue = $(this).attr('value');
            });
    });
于 2009-12-04T20:44:31.257 回答
1

只是一个想法，但是一旦您处理了更改事件，您就不能不将值设置为某个变量，以便下次处理它时，您会有那个值吗？

于 2009-12-04T20:33:56.033 回答
1

你可以做这样的事情

$(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;
}
于 2009-12-04T20:41:19.293 回答
0

这是使用 .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 调用以保存设置，一个隐藏的表单使用.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');
            }
        }
    });
于 2013-06-11T13:56:24.880 回答