event for attribute change of a <select> (DOMAttrModified?)

Say you have a <select>, that gets disabled and enabled by some event,
i.e. the "disabled" attribute gets set or removed.  Is there any event
that I could trap when the disabled state changes?

The only two I could find are:
- onpropertychange, which is only supported in IE, and only when the
"disabled" attribute gets removed, not when it is set
- DOMAttrModified, which is in the Level 2 DOM spec
(http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MutationEvent)
but somehow does not work right in Firefox:  I do get a flurry of 15 
events when the page loads, 6 of which seem to be triggered by the
"disabled" attribute for the "scrollbar" of the select, but never when it
actually gets disabled or enabled.

Here is a small sample: (the console.log works if you have Firebug
installed)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>dynamic filters</title>

<script type="text/javascript">
function selectchange(select) {
  var child = document.getElementById(dynfilterhierarchy[1]);
  var foo = child.getAttribute("disabled");
  if (foo) { child.removeAttribute("disabled", 0); }
  else { child.setAttribute("disabled", "true", 0); }
}

function selectpropertychange(e) {
//  console.log("event: %o, target: %s, name: %s, oldvalue: %s,
newvalue: %s, change: %s, relatednode: %o", e, e.target.id, e.attrName,
e.prevValue, e.newValue, e.attrChange, e.relatedNode);
  alert("hello, world!");
}
</script>
</head>
<body>
<fieldset>
<legend>one</legend>
<select id="dynfilter0" onchange="selectchange(this);">
<option> </option>
<option>Books</option>
<option>Music</option>
</select>
<select id="dynfilter1" onpropertychange="selectpropertychange();">
</select>
<select disabled="disabled" id="dynfilter2">
</select>
</fieldset>

<script type="text/javascript">
  var dynfilterhierarchy = new Array("dynfilter0", "dynfilter1",
"dynfilter2");
  console.log(dynfilterhierarchy[1]);
  var node = document.getElementById(dynfilterhierarchy[1]);
  console.log(node);
  node.addEventListener('DOMAttrModified', selectpropertychange, false);
</script>
</body></html>

Received on Tuesday, 9 January 2007 02:51:28 UTC