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

Ответ 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");
});

Ответ 2

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

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

Ответ 3

Если вы просто хотите предотвратить взаимодействие с выбором вообще, когда my_condition истинно, вы всегда можете просто захватить событие 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 истинно.

Ответ 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)
        } 
    }            
}); 

Демо

Ответ 5

$('#my_select').change(function(ev) {

  if(my_condition)
  {
    ev.preventDefault();
    return false;
  }

});

посмотрите .change, а также я думаю, что когда вы используете ev.preventDefault();, вам не нужно return false;

Ответ 6

Возможно, вам придется использовать параметр ".live" в jQuery, поскольку поведение будет оцениваться в режиме реального времени в зависимости от установленного вами условия.

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

Ответ 7

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

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

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

Ответ 8

Вы можете сделать это без 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>

Ответ 9

Реализация пользовательского readonly like 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/

Ответ 10

Это была ТОЛЬКО вещь, которая работала для меня (в 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>

Ответ 11

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

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