Accessing value of SELECT in Internet Explorer 6

I am looking for simple and short solution of accessing SELECT value on HTML websi开发者_高级运维te in Internet Explorers (6 and 7).

HTML

<select id="s1">
    <option>Option1</option>
</select>

JS:

document.getElementById("s1").options[document.getElementById("s1").selectedIndex].value

Above code do not work. I get empty strings.

I found one solution - I would have to make every option look like this:

<option value="Option1">Option1</option>

That works but my website mostly cosist of forms, so such operation increase its size by 50-70%.

Do you know any other ways ?

PS. I've read that I should use "text" instead of "value", but I am not sure about that. I couldn't find what are the consequences of doing this.

Use,

document.getElementById("s1").options[document.getElementById("s1").selectedIndex].innerHTML;

This is because you don't have a value attribute in your option:

<select id="s1">
    <option value="Option1">Option1</option>
</select>

This would give you the correct value back.

Newer browsers send the option text instead of the missing value attribute.

As for your question as to what to use, the proper semantic way would be to use value attribute. What if your display text is different than value? Would you change your design again?

If page size is a concern, try removing whitespace or gzipping content instead of breaking the semantics. Note that some older IE6 versions (IE6 with SP3 is fine I guess) may not play well with GZipped content.