Dynamically Adding Option Elements to Select Objects… The Real Story

I don’t normally blog about pure code subjects, so this is going to be way too technical/boring for the general readership of this blog. However, I wasn’t able to find the definitive answer to this question after searching around with Google, so I figured I’d contribute a little. This is also a wiki-style reminder to myself the next time I need to do this.

Mostly you’ll be interested in this post if you’re trying to programmatically add options to a select list using JavaScript. Of all the ways to do this, there are a few that work and many that don’t. The catch seems to be that IE is picky about how and when the data “inside” the option tag (the visible text in the option list) is set. According to the documentation there should be any number of ways to set this–.text, .innerHTML, .innerText. Of those, the only one that seems to be broadly compatible is .text. .innerText is IE-only, so it’s right out. .innerHTML is valid across platforms, but it messes with the object model in IE6 and IE7 (and IE8 beta 1, now that I look) in such a way that if you use it, you have to add the option element to the select element before setting the .innerHTML property. See below for a breakdown of the methods, plus test code. Blogger might break this, so be sure to look at the plain test page (“view source” is going to be a lot friendlier on that page as well).

In any case, here’s the take-away when adding options to select elements:

  • Always use the .text property of the newly-created option object to set the visible text for the option.
  • As a precaution, add the new option object to the select object’s options collection before setting other properties of the option.

create option, set .value, set .text, add to options list (generally compatible)


function createSetTextAddOption(selectEl,val,displayText) {
var o = document.createElement("OPTION");
o.value = val;
o.text = displayText;
selectEl.options.add(o);
return false;
}


create option, set .value, set .innerHTML, add to options list (fails IE6, IE7, IE8-‘invalid argument’)


function createSetInnerHTMLAddOption(selectEl,val,displayText) {
var o = document.createElement("OPTION");
o.value = val;
o.innerHTML = displayText;
selectEl.options.add(o);
return false;
}


create option, add option to list, set .value, set .innerHTML (generally compatible)


function createAddOptionSetInnerHTML(selectEl,val,displayText) {
var o = document.createElement("OPTION");
o.value = val;
selectEl.options.add(o);
o.innerHTML = displayText;
return false;
}


create option, add option to list, set .value, set .text (generally compatible)


function createAddOptionSetText(selectEl,val,displayText) {
var o = document.createElement("OPTION");
o.value = val;
selectEl.options.add(o);
o.text = displayText;
return false;
}


Attempt to add new options/selects inline (option 2 and select 2 fail in IE, either silently or with the “invalid argument” error)

According to the Microsoft documentation, this shouldn’t work at all. Here’s what they say about the option.add() method:

This method can be used to add elements only after the page loads.

If the method is applied inline, a run-time error occurs.

And yet, it mostly does work, aside from the innerHTML limitation…


// generally compatible inline adds
createSetTextAddOption(document.getElementById('sel5'),'1','added value 1');
createAddOptionSetInnerHTML(document.getElementById('sel5'),'3','added value 3');
createAddOptionSetText(document.getElementById('sel5'),'4','added value 4');

addNewSelect(document.getElementById('sel5'),'1','added value 1',createSetTextAddOption);
addNewSelect(document.getElementById('sel5'),'1','added value 3',createAddOptionSetInnerHTML);
addNewSelect(document.getElementById('sel5'),'1','added value 4',createAddOptionSetText);

// these two fail in IE6, IE7, IE8
createSetInnerHTMLAddOption(document.getElementById('sel5'),'2','added value 2');
addNewSelect(document.getElementById('sel5'),'1','added value 2',createSetInnerHTMLAddOption);

Again, I encourage you to view the plain test page to avoid any Blogger-induced weirdness.

This Meme Needs a Name

All of a sudden (though probably not–I’m just catching on) there’s a rash of services that crunch plain text or data keys and return parsed, formatted, drilled-down usable data. For example…

Tripit will digest all your travel confirmations and produce a rich itinerary.

Google SMS will take a zip code, flight number, etc., from your cell phone, and return a rich data node.

Opencalais is a platform for doing stuff like this.

So what do we call it?

Mailinator: Free, Instant, Completely Unsecure Email

What if you’re downloading a product demo, need a unique address to get the key, and never want to hear from that company again? Good luck! Actually, you don’t need good luck, just mailinator.

Send to any address at mailinator.com (or one of several other domains) and then go to the site and check your email. But make it a long, complex address, because there’s no password. In fact, anyone can check “your” email if they know the email address (including the person/company who sends email to you).

If you completely understand the limitations, this is a wonderful service.

Exclusively for 1&1 Customers (Who Obviously Like Getting Screwed)

I usually chalk the non-sequitur nature of 1&1.com‘s marketing materials up to some combination of baseline corporate incompetence and English as a second language. But lately they’re crossing right over into false advertising territory.

Today, for example, I received an email with the subject “Exclusively for 1&1 Customers.” Here it is:

1and1 offer email--click for larger version

Right off the bat there are a couple of lies here. The first one is that only customers can take advantage of this “offer.” In fact, it represents the current default pricing on their web site. Secondly, as a current customer, the only way I can take advantage of this is by buying a new package–they’re definitely not offering me a discount on my current services.

The real fun, however, is in the pricing. For example, notice how the current “50% off sale” gets you a $6.99 domain registration for $6.12. The fine print, of course, is that it’s 50% off for three months on a one-year contract. I guess we should just be glad they’re not advertising domains at $0.29/month (every other product is advertised by the month, yet also requires a one-year commitment). But it’s not like the print is that fine, right? Yet for every product listed and the minimum contract available, this “50% off sale” is, in fact, a 12.5% off sale. Actually, there is one exception: for dedicated servers it’s a 6.25% off sale (24-month contract required).

But what are you going to do? To paraphrase Winston Churchill… 1&1 is the worst web hosting company, except for all the others I’ve tried.

When You’re an End Node, It Doesn’t Pay to Ask Why

I think what he’s saying here is that where you look for answers as a developer is heavily influenced by the domain in which you’re operating. Yes, you need to consider “best practices” (groan), and sometimes it’s a good idea to “think outside the box” (wretch), but most of the time you really need to concentrate on what is possible and efficient and makes sense in the current context. This is why when you want to learn about a technology you can read a book, but when you actually have to implement it you end up sorting through a lot of discussion groups and blog posts, and especially blog comments–the ultimate end nodes of the infocloud.

Just a neat blog I stumbled on in an otherwise anxious, code-heavy week of integrating things that were never meant to work together.

Cheap Router as Wireless Bridge

I recently had a desperate need for a wireless bridge device. The need has passed, but I finally figured out a way to do it without spending $60+ for a dedicated (one port) bridge. The main goal here is to provide a physical Ethernet jack somewhere out on your wireless network for a device or devices that can’t connect to wireless directly. I was able to get this working just now using a $25 refurbished Netgear WGT624v3 from Fry’s. I followed (and interpreted, because it’s not as step-by-step as it could be) these instructions. Supplemented with information from this thread.

What’s really amazing about this is that you end up using a shell session on the router, without having to hack the firmware (though you are exploiting a disabled interface and a NetGear diagnostic tool that turns it back on). It’s pretty strange.

In any case, I can now put four physical Ethernet ports anywhere within range of my wireless network. The bridge is effectively dumb and invisible–DHCP, DNS, etc. all come from the access point.

Not directly needed, but here’s some interesting background on hacking NetGear equipment.

The best part about this? I found the original thread, and the fact that this was all possible, using my Sprint phone while standing in Fry’s staring at the blank brown box of the refurbished WGT624 wondering “WTF is this?” (iPhone? We don’t need no stinking iPhone.)

Potential limitations that may reduce the usefulness of this. I don’t know if these are actual limitations, but I haven’t tested beyond my own setup.

  • Tested only bridging to NetGear access point (potential issues with other brands?)
  • Tested only 64-bit WEP encryption (some of the comments mentioned problems with WPA)
  • Tested only with published SSID at the AP
  • Possible wireless saturation/interference–when I tried this with the bridge a few inches from my Thinkpad, the internal Centrino wireless could no longer connect, and I’ve read that some BIOS versions of this router produce illegally-strong radio signals

Scientists to The World: Two Billion Must Die

Like a bunch of real-life Rip Van Winkles, the scientific community has awoken from a 20-year slumber and come to the conclusion that the world has two billion more humans than it can possibly support. And while a phrase like “the scientific community” is often a euphemism for “some guy at a liberal arts college in Oregon” in this case we’re actually talking about “388 scientists reviewed by roughly 1,000 of their peers.” As far as scientists go, I think that’s pretty much all of them.

Speaking of which, have you seen Al Gore’s new business card?

I told you so

A fluke among flounder