i won’t repeat why we must do these things. that was the purpose of the post just prior to this one. i would recommend reading it if you haven’t already.
–

1. selectively use onpropertychange in <select>’s, and add onkeyup

go to: http://krisgale.com/select-fixed.html

this is the source code from the above…

  1. <html>
  2. <head>
  3. <title>select</title>
  4. <script type="text/javascript">
  5. function selectchange()
  6. { var frm = document.forms["testform"];
  7. var fld = frm["testselect"];
  8. var val = fld.options[fld.selectedIndex].value;
  9. document.getElementById("testvalue").innerHTML = val;
  10. }
  11. </script>
  12. </head>
  13. <body>
  14. <form name="testform" action="select.html" method="get">
  15. <!--[if IE]>
  16. <select name="testselect" onpropertychange="selectchange();" onkeyup="selectchange();">
  17. <![endif]-->
  18. <!--[if !IE]>-->
  19. <select name="testselect" onchange="selectchange();" onkeyup="selectchange();">
  20. <!--<![endif]-->
  21. <option value='1'>a</option>
  22. <option value='2'>b</option>
  23. <option value='3'>c</option>
  24. </select>
  25. </form>
  26. <hr />
  27. <div id="testvalue">&nbsp;</div>
  28. </body>
  29. </html>

this should not work. it should not even be considered valid. but it does and it is.

in essence, what this ponderous pile of poo does, is, attach the same event handler to onkeyup as onchange, to account for when a user uses the keyboard to shortcut to an <option> rather than clicking on it.

and to get around internet explorer’s autocomplete function munging things up even more, that mess of special-purpose html comments, nested inside standard html comments (so the user never sees them), sets up the <select> with an onpropertychange attribute rather than an onchange attribute, in a manner that mutually excludes all browsers but ie 5.0 and later (which is the version that introduced these html comments).

i feel dirty.

2. check for selectedIndex == 0, not a possibly-not-empty empty string

to avoid the pitfall of having an event handler deliver your client-side validation script the contents of an <option> instead of an empty string, you can modify your code to check for selectedIndex == 0 instead.

<select name=”dropdown”>
<option>please select</option>
…
</select>
…
var fld = document.getElementById(”dropdown”);
if(fld.selectedIndex == 0)
{ alert(”please select an option”);
fld.focus();
}

alternatively, you might forego the nicety of the prompt within the dropdown and try an entirely empty first <option>.

<option></option>

but for most, this will be too great a compromise; an initially-blank select box does nothing to direct the user to pick something… on the other hand, if your validation is purely server-side, this may be your only reasonable alternative.

as far as not rewriting code to check for selectedIndex == 0, this may work…

<option value=”>please select</option>

or it may not. it really should, but…

3. use javascript: in href’s and avoid onclick in <a> elements

instead of…

<a id=”link” href=”javascript:void(0);”>click here</a>
…
document.getElementById(”link”).onclick = doSomething;

do this:

<a id=”link” href=”javascript:”>click here</a>
…
document.getElementById(”link”).href=”javascript:doSomething();”;

it’s not nearly as elegant, but at least it will work with ie7.

–
thank you microsoft, for wasting my weekend. i would be grateful if any of these were billable hours, and even then, i’m not sure how much so.