<select> и <option> | JavaScript

События для <select>

События при получении элементом фокуса focus, потери элементом фокуса blur, щелчке по элементу click, смене пункта change

Арбуз Дыня Тыква

<select id="raz">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>
<textarea class="raz" rows="9"></textarea>

<script>
var raz = document.getElementById('raz'),
    t = raz.nextElementSibling,
    i = 1;
raz.addEventListener("click", function() {
  t.value += 'click' + i + '\n';
  t.scrollTop = t.scrollHeight;
  i += 1;
});
raz.addEventListener("change", function() {
  t.value += 'change\n';
  t.scrollTop = t.scrollHeight;
});
raz.addEventListener("focus", function() {
  t.value += 'focus\n';
  t.scrollTop = t.scrollHeight;
});
raz.addEventListener("blur", function() {
  t.value += 'blur\n\n';
  t.scrollTop = t.scrollHeight;
  i = 1;
});
</script>

Событие при повторном выборе <option>

В Mozilla Firefox и в IE не срабатывает клик, если щёлкать по уже выбранному пункту, и весь подсчёт сбивается.

Арбуз Дыня Тыква

<select id="raz1">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>
<textarea class="raz" rows="9"></textarea>

<script>
var raz = document.getElementById('raz1'),
    t = raz.nextElementSibling,
    i = 0, v = '';

raz.addEventListener("focus", function() {
  v = this.value;
});

raz.addEventListener("click", function() {
  i += 1;
  if(i & 1) {} else {
    if(v == this.value) {
      t.value += this.value+'\n';
      t.scrollTop = t.scrollHeight;
    } else {
      v = this.value;
    }
  }
});

raz.addEventListener("blur", function() {
  i = 0;
  t.value += '\n';
  t.scrollTop = t.scrollHeight;
});
</script>

Тип тега <select>

HTMLSelectElement.type: получить тип

Возвращает select-one или select-multiple, если есть атрибут multiple.

Арбуз Дыня Тыква Арбуз Дыня Тыква

<select onclick="alert(this.type)">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>
<select onclick="alert(this.type)" multiple>
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>

HTMLSelectElement.multiple: получить и изменить тип

Возвращает false или true, если есть атрибут multiple.

Нажать Арбуз Дыня Тыква

<button type="button" onclick="this.nextElementSibling.multiple = (this.nextElementSibling.multiple == false ? true : false)">button</button>
<select onclick="alert(this.multiple)">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>

Количество пунктов <select>

HTMLSelectElement.length: получить и изменить количество пунктов

Арбуз Дыня Тыква

<select onclick="alert(this.length)">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>

Нажать (сперва 3 пункта, затем 1, затем 5) Арбуз Дыня Тыква

<button type="button" onclick="this.nextElementSibling.length = (this.nextElementSibling.length == 3 ? 1 : 5)">Нажать (сперва 3 пункта, затем 1, затем 5)</button>
<select>
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>

HTMLSelectElement.add(): добавить новый пункт

Добавить новый пункт последним Арбуз Дыня Тыква

Получить значение <select>

select.value: выводится значение атрибута value или при его отсутствии текст выбранного тега option [whatwg.org].

Арбуз Дыня Тыква

<select onchange="alert(this.value)">
  <option value='красный'>Арбуз</option>
  <option value='желтая'>Дыня</option>
  <option value='оранжевая'>Тыква</option>
</select>

Арбуз Дыня Тыква

<select onchange="alert(this.value)">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>

Арбуз Дыня Тыква Арбуз Дыня Тыква

<select onchange="alert(this.options[this.selectedIndex].value)">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>

Выбрать значение <select>

Арбуз Дыня Тыква Выбрать Дыня Тыква https://msdn.microsoft.com/en-us/library/ms535877(v=vs.85).aspx https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionsCollection https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option http://www.javascriptkit.com/jsref/select.shtml https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement