Getting a previously selected item in a select box using jQuery

Question

I have an HTML selection box for a single element in which I would like to know which element was selected immediately before changing the selection to a new element.

By the time the change event is triggered, it is 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 is triggered when the control loses input focus and its value has been changed since the focus was received."

However, capturing the blur event does not seem to be a valid event, and there is no type of onFocusLost event.

Is this possible in cross browser compatible mode without a lot of hoops?

Answer 1

This should fix the value before changing it. The value will be captured as soon as the user opens the selection menu, but before he actually selects something.

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

Answer 2

Just think, but can you, after you process the change event, set the value of a variable, so the next time you process it, you get this value?

Answer 3

You can 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 a modern 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 the original output of the page, since the above will give me the wrong value after the user changes it more than once before submitting the form data.

My solution was to add the “previous” attribute to the select element filled with the value in the output, and then change it to the result of “success” from Ajax while saving:

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

Then, when the user clicks the cancel button in the pop-up confirmation or an Ajax error appears, I simply did:

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

and if after Ajax “success” changes the “previous” attribute to a new successfully saved value:

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

Suitable for one form element, but I need an adaptation where I have a list of accounts, each of which has a menu for choosing account status settings, which launches the jQuery UI dialog box, which, in turn, decrypts Ajax Call to save the settings, A single hidden form with a set of fields is populated with values ​​from the selection menu using .on ('change')

Here is one of the selected menus (usually a unique identifier is used, but in my case there are several reasons related to the server, why I can not use them this time, therefore, the combined use of the attributes "rel" and "rel", type ", that the same code saves changes in 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> 

Since there are 3 points in the script where a crash can occur, and one success makes 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'); } } });