JQuery предотвратить изменения для выбора

Question

Я хочу запретить изменение поля выбора, если применяется определенное условие. Это не похоже на работу:

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

Я предполагаю, что это потому, что к этому моменту выбранная опция уже изменилась.

Каковы другие способы сделать это?

Answer 1

Попробуйте это:

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

Answer 2

В случае, если кому-то нужна общая версия ответа Матцвена (как я это сделал), вот он:

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

Answer 3

Если вы просто хотите полностью запретить взаимодействие с select, когда my_condition имеет значение true, вы всегда можете просто захватить событие mousedown и предотвратить его в вашем событии:

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

Это предотвратит любое событие изменения, когда my_condition имеет значение true.

Answer 4

Другой вариант, который следует рассмотреть, - это отключить его, если вы не хотите, чтобы его можно было изменить, и включите его:

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

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

Обновление после вашего комментария (если я понимаю, что вам нужно):

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

Демо

Answer 5

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

Answer 6

Это сработало для меня, нет необходимости сохранять lastSelected, если вы знаете, optionIndex для выбора.

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

Answer 7

Это была ЕДИНСТВЕННАЯ вещь, которая работала для меня (в Chrome версии 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>

Answer 8

Реализация пользовательских только для чтения, как 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>

Демо: https://jsfiddle.net/0mvajuay/8/

Answer 9

Вы можете сделать это без JQuery ...

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

или вы можете сделать функцию для проверки вашего состояния

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

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

Answer 10

Ни один из ответов не помог мне.Простое решение в моем случае было:

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

Это позволяет выполнить щелчок или вкладку в раскрывающемся списке выбора и просто перемещает фокус в другое поле (соседний ввод текста, который был установлен только для чтения) при попыткесосредоточиться на избранных.Может звучать глупо, но очень эффективно.