web-dev-qa-db-fra.com

jQuery empêcher le changement pour select

Je souhaite empêcher la sélection d'une boîte de sélection si certaines conditions s'appliquent. Cela ne semble pas fonctionner:

$('#my_select').bind('change', function(ev) {
  if(my_condition)
  {
    ev.preventDefault();
    return false;
  }
});

J'imagine que c'est parce qu'à ce stade, l'option sélectionnée a déjà été modifiée. 

Quels sont les autres moyens de le faire?

javascriptjqueryeventsselect
40
overgroove

Essaye ça:

http://jsfiddle.net/qk2Pc/

var my_condition = true;
var lastSel = $("#my_select option:selected");

$("#my_select").change(function(){
  if(my_condition)
  {
    lastSel.prop("selected", true);
  }
});

$("#my_select").click(function(){
    lastSel = $("#my_select option:selected");
});
45
mattsven

Si quelqu'un a besoin d'une version générique de la réponse de mattsven (comme je l'ai fait), la voici:

$('select').each(function() {
    $(this).data('lastSelected', $(this).find('option:selected'));
});

$('select').change(function() {
    if(my_condition) {
        $(this).data('lastSelected').attr('selected', true);
    }
});

$('select').click(function() {
    $(this).data('lastSelected', $(this).find('option:selected'));
});
29
dwallace

Si vous voulez simplement empêcher toute interaction avec la sélection lorsque my_condition est vraie, vous pouvez toujours capturer l'événement mousedown et éviter ainsi:

var my_condition = true;

$("#my_select").mousedown(function(e){
  if(my_condition)
  {
     e.preventDefault();
     alert("Because my_condition is true, you cannot make this change.");
  }
});

Cela empêchera tout événement de changement de se produire tant que my_condition est vrai.

8
Chris Longmoon

Une autre option à considérer est de la désactiver lorsque vous ne souhaitez pas la modifier et de l'activer:

//When select should be disabled:
{
    $('#my_select').attr('disabled', 'disabled');
}

//When select should not be disabled
{
    $('#my_select').removeAttr('disabled');
}

Mise à jour depuis votre commentaire (si je comprends la fonctionnalité que vous souhaitez): 

$("#dropdown").change(function()
{
    var answer = confirm("Are you sure you want to change your selection?")
    {
        if(answer)
        {
            //Update dropdown (Perform update logic)
        }
        else
        {
            //Allow Change (Do nothing - allow change)
        } 
    }            
});

Démo

2
Rion Williams

Aucune des réponses n'a bien fonctionné pour moi. La solution facile dans mon cas était:

$("#selectToNotAllow").focus(function(e) {
    $("#someOtherTextfield").focus();
});

Cela permet de cliquer ou de tabuler dans le menu déroulant de sélection et déplace simplement le focus sur un champ différent (une entrée de texte proche définie en lecture seule) lorsque vous essayez de vous concentrer sur la sélection. Cela peut sembler idiot, mais très efficace.

0
user2125504

Vous devrez peut-être utiliser l'option ".live" dans jQuery car le comportement sera évalué en temps réel en fonction de la condition que vous avez définie.

$('#my_select').live('change', function(ev) {
  if(my_condition)
  {
    ev.preventDefault();
    return false;
  }
});
0
AcidRaZor

C’est la SEULE chose qui a fonctionné pour moi (sur la version 54.0.2840.27 de Chrome):

$('select').each(function() {
  $(this).data('lastSelectedIndex', this.selectedIndex);
});
$('select').click(function() {
  $(this).data('lastSelectedIndex', this.selectedIndex);
});

$('select[class*="select-with-confirm"]').change(function() {  
  if (!confirm("Do you really want to change?")) {
    this.selectedIndex = $(this).data('lastSelectedIndex');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id='fruits' class="select-with-confirm">
  <option selected value="apples">Apples</option>
  <option value="bananas">Bananas</option>
  <option value="melons">Melons</option>
</select>

<select id='people'>
  <option selected value="john">John</option>
  <option value="jack">Jack</option>
  <option value="jane">Jane</option>
</select>

0
w.stoettinger

$('#my_select').bind('mousedown', function (event) {
         event.preventDefault();
         event.stopImmediatePropagation();
     });

0
Morteza Soltanabadiyan

Implémentation personnalisée en lecture seule comme eventHandler

<select id='country' data-changeable=false>
  <option selected value="INDIA">India</option>
  <option value="USA">United States</option>
  <option value="UK">United Kingdom</option>
</select>

<script>
    var lastSelected = $("#country option:selected");

    $("#country").on("change", function() {
       if(!$(this).data(changeable)) {
            lastSelected.attr("selected", true);              
       }        
    });

    $("#country").on("click", function() {
       lastSelected = $("#country option:selected");
    });
</script>

Démo: https://jsfiddle.net/0mvajuay/8/

0
Karthik Moorthy

Vous pouvez le faire sans jquery ...

<select onchange="event.target.selectedIndex = 0">
...
</select>

ou vous pouvez faire une fonction pour vérifier votre condition

<select onchange="check(event)">
...
</select>

<script>
function check(e){
    if (my_condition){
        event.target.selectedIndex = 0;
    }
}
</script>
0
Giolvani

Cela a fonctionné pour moi, pas besoin de garder une lastSelected si vous connaissez la optionIndex à sélectionner.

var optionIndex = ...
$(this)[0].options[optionIndex].selected = true;
0
Patrick from NDepend team