jQuery comment annuler une modification de sélection

Question

J'ai une boîte de sélection, et je voudrais ajouter une confirmation avant de le changer d'une option spécifique. Exemple:

<select name="select">
    <option value="foo" selected="selected">foo</option>
    <option value="bar">bar</option>
</select>​​​​​​​​​​​​​​​​​​

$('select').change(function() {
    var selected = $(this).val();

    if (selected == 'bar') {
        if (!confirm('Are you sure?')) {
            // set back to previously selected option
        }
    }
});

Je pense à l'ajout d'un champ caché et de mettre à jour sa valeur à chaque fois que la sélection est modifiée. De cette façon, je peux récupérer la valeur précédente en change fonction. Exemple:

<input type="hidden" name="current" value="foo" />

$('select').change(function() {
    var selected = $(this).val();
    var current = $('input[name=current]').val();

    if (selected == 'bar') {
        if (!confirm('Are you sure?')) {
            $(this).val(current);
            return false;
        }
    }

    $('input[name=current]').val(selected);
});

Est-il un moyen plus facile/mieux pour accomplir cette?

Answer 1

Plutôt que d'utiliser une variable globale (evil!) Ou un élément caché (abus du DOM), vous pouvez utiliser la fonctionnalité $.data :

 $('select').change(function() {
    var selected = $(this).val();

    if (selected == 'bar') {
        if (!confirm('Are you sure?')) {
            $(this).val($.data(this, 'current')); // added parenthesis (edit)
            return false;
        }     
    }

    $.data(this, 'current', $(this).val());
});
 

Answer 2

Vous pouvez utiliser une variable normale au lieu d'un caché d'entrée.

Answer 3

Je pense que cela peut être une autre façon d'obtenir même.Ce code sera également annuler sélectionnez modifier.

   <div class="selection">

          <input type="radio" class="selected" value="test1" name="test1" 
          checked="checked" /><label>test1</label>

          <input type="radio" name="test1" value="test2" /><label>
          test2</label>

          <input type="radio" name="test1" value="test3" /><label>
          test3</label>

    </div>

     $("input[name='test1']").change(function() {
            var response = confirm("do you want to perform selection change");
            if (response) {
                var container = $(this).closest("div.selection");
                //console.log(container);
                //console.log("old sel =>" + $(container).find(".selected").val());
                $(container).find(".selected").removeClass("selected");
                $(this).addClass("selected");
                //console.log($(this).val());
                console.log("new sel =>" + $(container).find(".selected").val());
            }
            else {
                var container = $(this).closest("div.selection");
                $(this).prop("checked", false);
                $(container).find(".selected").prop("checked", true);
            }
        });

Answer 4

Oldschool moyen (avant nous avons utilisé jquery):

<select id="mySelect" onchange="if(confirm('Do you really want to change?')){ doSomething(); } else { this.selectedIndex=myIndex; }">
    <option value="foo" selected="selected">foo</option>
    <option value="bar">bar</option>
</select>
<script type="text/javascript">
    var myIndex = $('mySelect').selectedIndex;
</script>

Answer 5

Je voudrais créer une variable globale et réglez le sélecteur de valeur à $(document).prêt();. Ensuite, chaque fois que la valeur est modifiée, vous pouvez modifier la valeur globale en conséquence.