Question

How to cancel change event for combo box (SELECT) element. There is no onbefore or onchanging event for HTML SELECT element. If I put:

<SELECT onchange="return false;">
    <OPTION value=a>A</OPTION>
    <OPTION value=b>B</OPTION>
</SELECT>

event is not canceled.

Answer 1

You need to save the original value of the <select> somewhere. So that you can change the value back.

Cancelling the event, only does that. It just cancels the event, it doesn’t change the value.

Example (using jQuery):

$(function(){
    $('select').each(function(){
        $(this).data('selected', $(this).val()); // back up value
    }).change(function(){
        if(confirm('Are you sure you want to change the element?')){
            $(this).data('selected', $(this).val()); // back up new value
        }
        else{
            $(this).val($(this).data('selected')); // restore old value
        }
    });
});

DEMO: http://jsfiddle.net/pL2B4/

Pure JavaScript solution (no jQuery):

var select = document.getElementsByTagName('select');
for (var i = 0, len = select.length; i < len; i++) {
    var el = select[i];
    el.setAttribute('data-selected', el.value);
    el.addEventListener('change', function() {
        if (confirm('Are you sure you want to change the element?')) {
            el.setAttribute('data-selected', el.value);
        }
        else {
            el.value = el.getAttribute('data-selected');
        }
    });
}​

DEMO: http://jsfiddle.net/pL2B4/1/