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

Question

I have a single item HTML select box on which I'd like to find out the what item was selected just prior to changing selection to the new item.

By the time the change event is fired, it's already too late:

$("select").change(function () {
  var str = "";
  $("select option:selected").each(function () {
      // this will get me the current selected item (the new one)
      str += $(this).text() + " "; });          
})

The docs say that 'The change event fires when a control loses the input focus and its value has been modified since gaining focus.'

However, trapping the 'blur' event doesn't seem to be the right event either and there's no "onFocusLost" type of event..

Is this feasible in a cross-browser compatible way without a lot of hoop jumping?

Answer 1

This should capture the value before it changes. The value will be grabbed as soon as the user opens the select menu, but before they actually select something.

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

Answer 2

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

Answer 3

You could do something like this

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

Here is an up-to date solution using .on

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

However for what I wanted to achieve, the above was too loose, I needed the value that was selected on initial page output as the above will give me the incorrect value after the user changes it more than once before submitting the form data.

My solution was to add a "previous" attribute to the select element populated with the value on output, then change it on a "success" result from Ajax when saved:

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

Then upon the user pressing a cancel button on a confirmation popup or there being a Ajax error I just did:

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

and if upon Ajax "success" change the "previous" attribute to the new successfully saved value:

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

Suitable for a single for form element but I required an adaptation where I have a list of accounts each with an account status setting select menu that triggers a jQuery UI dialogue box that in turn deciphers the Ajax Call to save the setting, A single hidden form with a set of fields is populated with values from the select menu using .on('change')

Here is one of the select menus (Unique ID's would normally be used but in my case there a couple of server side reasons why I can't use them this time around hence the combined use of the attributes "rel" and "type", same code saves changes to different database tables):

<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>

Because there are 3 points in the script where a fail can occur and one success it made sense to make a function:

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

Here is the jQuery UI Dialog code:

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