选择元素 - 防止选择更改

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/