Javascript : preventDefault() not working on a select tag?

Question

I want to come back to the previous option when a user select a option which doesn't fulfill a condition. For exemple, this code :

    <select onchange="test_condition(this, event);">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>

    <script type="text/javascript">

    function test_condition(this_select, event)
    {
         /*If the value of selected option is not equal to 3, 
         come back to the previous option with event.preventDefault(); 
         but this isn't working :*/
         if(this_select.value != 3)
         {event.preventDefault();}
    }

    </script>

So if the select tag has the "2" option displayed (for exemple), and the user selects the "4" option, then the select must display the previous option, that is say the "2" option. But event.preventDefault is not working.

Have you a idea ?

Thank in advance, cordially.

Solution

I don't think you can use event.preventDefault() to prevent the select from updating onChange; however, you can work around this pretty easily. You can play around with this jsFiddle for my solution; I saved off the previous value and, if the new value doesn't match my criteria (in this case, if the new value isn't 3), I reassign it to the old value:

$(function () {
  var previous_value = $('#test_select').val();
  test_condition = function test_condition(this_select, event) {
        console.log(this_select.value);
        /*If the value of selected option is not equal to 3, 
         come back to the previous option with event.preventDefault(); 
         but this isn't working :*/
        if (this_select.value != 3) {
            $('#test_select').val(previous_value);
        } else {
            previous_value = this_select.value;
        }
    }
});

I also ran into a problem where test_condition was not defined, and fixed that by assigning it to a variable as you can see above.

Comments

[totoaussi]

Thank you very much, your code is working, but i must coding without jquery, only in pure javascript. It is possible ?

[totoaussi]

Thank you, but your code is working only in chrome, firefox, it's not working in Internet Explorer (the select tag display a empty option instead of the previous option).

[Carson Moore]

@totoaussi Check out this new fiddle (jsfiddle.net/hhmL543f/1) -- it uses document.getElementById('test_select').value = previous_value rather than jQuery's $('test_select').val(...).

[totoaussi]

Thank you very much, it's working thanks to you. But it's a pity that the code of the 1st reply (user Truong Hua) not working in Internet Explorer.