jQuery prevent change for select

Question

I want to prevent a select box from being changed if a certain condition applies. Doing this doesn\'t seem to work:

$(\'#my_select\').bind(\'change\', funct         


        

Answer 1

if anybody still interested, this solved the problem, using jQuery 3.3.1

jQuery('.class').each(function(i,v){

    jQuery(v).data('lastSelected', jQuery(v).find('option:selected').val());
    jQuery(v).on('change', function(){

    if(!confirm('Are you sure?'))
    {
        var self = jQuery(this);
        jQuery(this).find('option').each(function(key, value){
           if(parseInt(jQuery(value).val()) === parseInt(self.data('lastSelected')))
           {
               jQuery(this).prop('selected', 'selected');
           }
        });
    }
    jQuery(v).data('lastSelected', jQuery(v).find('option:selected').val());    
});

});

Answer 2

This was the ONLY thing that worked for me (on 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>

Answer 3

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

Answer 4

This worked for me, no need to keep a lastSelected if you know the optionIndex to select.

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

Answer 5

You can do this without jquery...

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

or you can do a function to check your condition

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

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

Answer 6

I was looking for "javascript prevent select change" on Google and this question comes at first result. At the end my solution was:

const $select = document.querySelector("#your_select_id");
let lastSelectedIndex = $select.selectedIndex;
// We save the last selected index on click
$select.addEventListener("click", function () {
    lastSelectedIndex = $select.selectedIndex;
});

// And then, in the change, we select it if the user does not confirm
$select.addEventListener("change", function (e) {
    if (!confirm("Some question or action")) {
        $select.selectedIndex = lastSelectedIndex;
        return;
    }
    // Here do whatever you want; the user has clicked "Yes" on the confirm
    // ...
});

I hope it helps to someone who is looking for this and does not have jQuery :)