<select> lists are very useful in HTML forms, but there’s a problem: an <option> can’t span multiple lines. Which is a pain in the backside, because I had a killer application in mind that would have needed this.

So I thought of a Cunning Plan: use the disabled attribute on “continuation” lines, and then make the disabled lines look “normal” by cunning use of CSS. This works perfectly in Firefox: I get unselectable items in my list. Guess which browser it doesn’t work in? There’s no way Microsoft aren’t doing this on purpose. The standards have been out there for years, if Microsoft could be arsed to follow them. (But if they actually followed standards, they’d have to compete on merit; and they wouldn’t be able to sell proprietary “solutions” to the problems they created in the first place by not following standards.)

Here’s the code I really wish I’d used.
$browser = $_SERVER["HTTP_USER_AGENT"];
if ((preg_match("/msie/i", $browser)) && !(preg_match("/opera/i", $browser))) {

It’d make my life, and the lives of technical support staff worldwide, a hell of a lot simpler. The boss, though, wasn’t having it. Not that he’s a Windows fan, far from it in fact; but this code is for a site that drooling idiots have to be able to use, and drooling idiots use whatever comes with their computer. Which, for the moment alas, usually means Windows and IE.

Fortunately, JavaScript comes to the rescue. IE supports the onchange attribute on a <select> list. So all we have to do is give the “continuation” lines a null value. Then, in the function called by onchange, we just have to check for a value or not and decrement the selectedIndex as long as the element it points to has value=="".

Here’s how:

function fix_select_list(fe) {
var ok = false;
var si;
while (!ok) {
si = fe.selectedIndex;
if (fe[si].value == "") {
fe.selectedIndex = si - 1;
else {
ok = true;

where the parameter fe is the form element in question (something like document.theform.thelist).

Comments are closed.