Получение значения поля SELECT в Internet Explorer

Question

У меня есть поле выбора:

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

И у меня есть этот JavaScript:

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

item1 всегда показывает пустой, никогда не выбранный параметр. Однако это работает в firefox .

Answer 1

Использование item.value работает для всех браузеров, кроме очень старых (Netscape 4, кто-нибудь?). Причина, по которой это не работает в этом случае, заключается в том, что у вас нет атрибута значения в опциях. Вы должны объявить значение для каждого атрибута. В настоящее время у вас есть только свойство «текст», которое обычно имеет значение по умолчанию всякий раз, когда никакое значение не объявляется. Кроме того, вы можете вставить некоторый код в событие загрузки окна, чтобы сделать «значение» каждой из этих опций таким же, как и «текст».

Третий способ использования приведенного ниже кода, который является старомодным:

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

Answer 2

Поскольку ваши теги параметров не имеют атрибута «значение», IE6 и IE7 вернут вам пустую строку. Вы должны прочитать значение из поля «text» объекта Option следующим образом:

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

в item1 вы получите нужное вам значение, не нарушая совместимость с Firefox и IE 8.

Answer 3

В качестве дополнения к ответу № 1, будьте осторожны, так как

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

EDIT

Согласно комментарию Тима, s.selectedIndex может быть -1, если вы установите его с помощью JavaScript или создадите пустое поле

Answer 4

Код для получения переменной columnName из поля SELECT с именем layerDetails.styleColumn (тег SELECT имеет одинаковые имя и идентификатор), который работает во всех браузерах ...

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;
    }
  }