Getting the value of a SELECT box in Internet Explorer

Question

I have a select box:

<select id="item1" name="Item 1">
  <option> </option>
  <option> Camera </option>
  <option> Microphone </option>
  <option> Tripod </option>
</select>

And I have this JavaScript:

var item1= document.getElementById("item1").value;

item1 always shows empty, never the option selected. However, this works in firefox.

Answer 1

Using item.value works for all browsers except very very old ones (Netscape 4 anyone?). The reason it does not work in this case is because you have no value attribute in options. You should declare value for each attribute. What you currently have is only "text" property, which normally defaults to value whenever no value is declared. Alternately you can push some code in the window onload event to make "value" of each of these options same as "text".

A third way you can use the code below, which is the old-fashioned way:

var s = document.getElementById('item1');
var item1 = s.options[s.selectedIndex].value;