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

You should do this instead:

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

Answer 2

As an addendum to answer #1, be careful as <select>.selectedIndex can be -1 some times which will throw an exception when passed into <select>.options[n]. As such, you might want do do a quick test:

var s = document.getElementById('item1');
var item = (-1 != s.selectedIndex)? 
               s.options[s.selectedIndex] : null;

EDIT

Per Tim's comment, s.selectedIndex can be -1 if you set it via JavaScript or you create an empty <select> box.

Answer 3

Since your option tags don't have the attribute "value" IE6 and IE7'll return you an empty string. You should read the value from the "text" field of the Option object like this:

var item1 = s.options[s.selectedIndex].text;

in item1 you'll have the value you need without breaking the compatibility with Firefox and IE 8.

Answer 4

Thank you guys, really great great thanks.

I wasted too much time to find a solution "Why this f'in IE does not loop and why it does not get the drop drown value?!". Tried too many different ways but no solutions then yet. Your post made me see that the one who has fault was me. I passed away my combo options value-free.

Thanks for getting me up.

Answer 5

Code to get a vaiable columnName from the SELECT box called layerDetails.styleColumn (SELECT tag has same name and Id), that works across ALL browsers ...

var columnName = document.getElementsByName('layerDetails.styleColumn')[0].value;
if ( columnName == null || columnName == '' )
  {
  columnName = document.getElementById('layerDetails.styleColumn').value;
  }

if ( columnName == null || columnName == '' )
  {
  var select = document.getElementById('layerDetails.styleColumn');
  columnName= select.options[select.selectedIndex].value;
  if ( columnName == null || columnName == '' )
    {
    columnName= select.options[select.selectedIndex].text;
    }
  }