web-dev-qa-db-de.com

jQuery verhindert Änderung für Auswahl

Ich möchte verhindern, dass ein Auswahlfeld geändert wird, wenn eine bestimmte Bedingung erfüllt ist. Das scheint nicht zu funktionieren:

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

Ich vermute, das liegt daran, dass sich die ausgewählte Option zu diesem Zeitpunkt bereits geändert hat. 

Was gibt es andere Möglichkeiten, dies zu tun?

40
overgroove

Versuche dies:

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

Falls jemand eine generische Version der Antwort von mattsven benötigt (wie ich), hier ist es:

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

Wenn Sie lediglich die Interaktion mit select ganz verhindern möchten, wenn my_condition wahr ist, können Sie immer das mousedown -Ereignis erfassen und verhindern, dass Ihr Ereignis dort verhindert:

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

Dadurch wird verhindert, dass ein Änderungsereignis auftritt, solange my_condition wahr ist.

8
Chris Longmoon

Eine andere zu berücksichtigende Option ist das Deaktivieren, wenn Sie nicht möchten, dass es geändert werden kann, und es zu aktivieren:

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

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

Update seit Ihrem Kommentar (wenn ich die gewünschte Funktionalität verstehe): 

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

Demo

2
Rion Williams

Keine der Antworten funktionierte gut für mich. Die einfache Lösung in meinem Fall war:

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

Hierdurch wird das Auswahl-Dropdown-Menü durch Klicken oder Tabstopp aktiviert, und der Fokus wird einfach in ein anderes Feld verschoben (eine nahegelegene Texteingabe, die als schreibgeschützt festgelegt wurde), wenn versucht wird, die Auswahl zu fokussieren. Klingt nach dummem Trick, aber sehr effektiv.

0
user2125504

Möglicherweise müssen Sie die Option ".live" in jQuery verwenden, da das Verhalten in Echtzeit basierend auf der von Ihnen festgelegten Bedingung bewertet wird.

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

Dies war das EINZIGE, was für mich funktionierte (in Chrome Version 54.0.2840.27):

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

Implementieren Sie benutzerdefinierte readonly wie 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>

Demo: https://jsfiddle.net/0mvajuay/8/

0
Karthik Moorthy

Sie können dies ohne Jquery tun ...

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

oder Sie können eine Funktion ausführen, um Ihren Zustand zu überprüfen

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

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

Dies hat für mich funktioniert, es ist nicht nötig, eine lastSelected zu behalten, wenn Sie die optionIndex auswählen können.

var optionIndex = ...
$(this)[0].options[optionIndex].selected = true;