html - 选择元素 - 防止选择改变

Question

如何取消组合框 (SELECT) 元素的更改事件。 HTML SELECT 元素没有 onbefore 或 onchanging 事件。如果我把:

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

事件没有取消。

Answer 1

您需要保存 <select> 的原始值某处。以便您可以将值改回。

取消事件，只会那样做。它只是取消事件，不会更改值。

示例(使用 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
        }
    });
});

演示:http://jsfiddle.net/pL2B4/

纯 JavaScript 解决方案(无 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');
        }
    });
}​

演示:http://jsfiddle.net/pL2B4/1/