Obtenir de l'élément précédemment sélectionné dans la boîte de sélectionner avec jQuery

J'ai un seul élément HTML de sélectionner la zone sur laquelle je voudrais savoir le quel élément a été sélectionné juste avant de changer de sélection pour le nouvel élément.

Par le moment de l'événement est déclenché, il est déjà trop tard:

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

Les docs disent que " Le changement événement se déclenche lorsqu'un contrôle perd le focus d'entrée et sa valeur a été modifiée depuis l'accès à l'accent.'

Cependant, le piégeage de la "brouiller" l'événement ne semble pas être le cas et il n'y a pas de "onFocusLost" type d'événement..

Est-ce réalisable dans un croix-navigateur compatible sans beaucoup de cerceau de saut d'obstacles?

OriginalL'auteur Alexi Groove | 2009-12-04

5

Cela doit capturer la valeur avant qu'elle change. La valeur sera saisi dès que l'utilisateur ouvre le menu sélectionner, mais avant de sélectionner quelque chose.
```
        $(document).ready(function(){
            $('select').focus(function(){
                var theValue = $(this).attr('value');
            });
    });
```
parfait! merci!
Ne fonctionne pas si vous changez plusieurs fois. De cette façon, l'accent est appelée une fois, mais le changement de l'événement plusieurs fois et vous obtenez la valeur initiale, pas de précédent. (Sur Google Chrome)

OriginalL'auteur Greg W
1

Juste une pensée, mais ne pouvez pas vous pas une fois que vous manipulez le changement de l'événement, définir la valeur d'une variable, alors la prochaine fois que vous manipuler, vous aurait que la valeur?

Si je l'enregistre après manipulation de l'événement de changement, je n'aurai pas le premier élément sélectionné et seules les sélections ultérieures. Ensuite, afin d'obtenir de la sélection initiale, j'avais besoin de prendre note de cela lorsque la section de document est chargé.
Oui, ce serait le cas. Vous devez obtenir l'état initial enregistré dans les variables lorsque le document est chargé.

OriginalL'auteur epitka

Vous pourriez faire quelque chose comme ce

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

OriginalL'auteur PetersenDidIt

Ici est une mise à jour de la solution à l'aide .sur

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

Cependant, pour ce que je voulais obtenir, le ci-dessus a été trop lâche, j'ai besoin de la valeur qui a été sélectionné sur la première page de sortie comme ci-dessus va me donner la valeur incorrecte après les modifications de l'utilisateur plus d'une fois avant de soumettre le formulaire de données.

Ma solution était d'ajouter un "précédent" de l'attribut à l'élément select renseignée avec la valeur de la sortie, puis changer sur un "succès" de l'Ajax lors de l'enregistrement:

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

Alors sur l'utilisateur en appuyant sur un bouton annuler sur une popup de confirmation ou de l'existence d'un Ajax d'erreur j'ai juste fait:

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

et si, au moment de l'Ajax "succès" de changer le "précédent" de l'attribut pour le nouveau enregistré avec succès la valeur:

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

Adapté pour un seul de forme de l'élément, mais j'ai exigé une adaptation où j'ai une liste de comptes, chacun avec un compte de réglage, sélectionnez menu qui déclenche un jQuery UI boîte de dialogue qui à son tour décrypte l'Appel Ajax pour enregistrer le réglage, Un seul formulaire masqué avec un ensemble de champs est rempli avec les valeurs de l'sélectionnez menu à l'aide de .on('change')

Ici est celui de la sélection de menus (ID Unique devrait normalement être utilisé, mais dans mon cas il y a un couple de côté de serveur raisons pourquoi je ne peux pas les utiliser ce temps donc autour de la combinaison de l'utilisation de l'attribut "rel" et "type", du même code enregistre les modifications apportées à différentes tables de base de données):

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

Parce qu'il y a 3 points dans le script où un échec peut se produire et un succès, il était logique de faire une fonction:

function set_select(saved)
    {
        var e = $(':input[type="'+$('#status-type').val()+'"][pun">+$('#status-id').val()+'"]');
        if(saved) e.attr('previous',e.children('option').filter(':selected').val());
        e.val( e.attr('previous') ).attr('selected',true);  
    };

Voici le 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');
            }
        }
    });

OriginalL'auteur Marc Newton

Vous devez vous connecter pour publier un commentaire.