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
        }
    });
});

DEMO：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');
        }
    });
}

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

选择元素 - 防止选择更改

1 个答案: