Internet Explorer Select Option Value
Published July 20th, 2006 in Small Talk, Web PagesUpdate2: It affects the released version of IE7. I guess compliance was not as much of a goal as the developers claimed… The feedback site is closed, so I can’t check the status of the bug I submitted. For more detailed information, check out my newer post.
Update: It does affect version IE7 Beta3. I have submitted the issue to Microsoft, so feel free to rate it. (Note: Requires MS Passport login)
While working with my first Ajax attempt (it allows data transfer to be sent “behind the scenes” to allow webpage updates via JavaScript without loading another page), I ran into some trouble. The page worked perfectly in FF and Safari, and I was rather surprised at how easy Ajax is, but Internet Explorer did not quite work. The request was supposed to return data from a PHP file in an HTML form and then inserted into a division…
The first IE problem was simple enough. It doesn’t accept document.getElementById(”example”).style.visibility = “collapse”;, so I had to change those to “hidden.” The other problem was that only a portion of the data was being returned. I went about the troubleshooting the wrong way, manipulating what data was being returned by the PHP file rather than looking at what request Internet Explorer was actually sending.
The GET string should have looked like “?buildingCode=EH&roomNumber=201,” but IE was not including the roomNumber, so the returned table was not including room-specific data. After I found out that problem, I traced the source to the way Internet Explorer handles select/option dropdowns. Previously, I had found out that IE6 likes to keep those boxes on top of everything, which is annoying enough. Now I have found that in IE the following options all have a value of NULL:
[html]
[/html]
Internet Explorer uses specs older than HTML 4. According to W3, if no value is specified, the user agent should use the contents of the option tags. This problem affects both Internet Explorer 6 and a version of Internet Explorer 7 beta (unsure if it affects the most recent beta release).
To get around this problem, you have to use the “.text” property as in:
[js]document.getElementById(”difficultySelection”).options[document.getElementById(”difficultySelection”).selectedIndex].text[/js]
…rather than simply document.getElementById(”difficultySelection”).value. Hope this helps someone save a few hours! (Note: the line breaks were added for viewing and are not in the code).
3 Responses to “Internet Explorer Select Option Value”
- 1 Pingback on Oct 23rd, 2006 at 10:57 am
Very odd little quirk with accessing the selected value of an option tag in Internet Explorer using javascript. Another option, instead of referencing the text value is to actually provide a value in the option tag (ie <option value=”Medium”>Medium</option>)
Yes, that does work. It seems rather redundant, which is probably why they changed the HTML specs so many years ago… but the value attribute is good for when the values are different (such as you want to display “medium” but you want the value to be “3″ for your program to use).