Элемент Select в JavaScript

Динамический список – это список объектов, который используется тогда, когда составляется метаописание электронного информационного ресурса. При появлении новых электронных ресурсов он может увеличиваться в размерах.

Элемент Select в языке JavaScript по сути своей является динамическим списком. В этой статье речь пойдёт именно о нём.

Список Select в JavaScript.

Select – это список, часто использующийся в Web-страницах.Он может быть как выпадающим, так и обыкновенным. Для добавления этого элемента используется код примерно такой конструкции:

<select id=»’name’»>
<option>’option 1’</option>
<option>’option 2’</option>
<option>…</option>
<option>’option n’</option>
</select>

Где,

1. <select> — элемент, имеющий закрывающий тег и атрибут id, в котором мы указываем его имя.
2. <option>— элемент, означающий какое-либо значение в этом списке. Внутри этого элемента содержимое этого значения.Таких «опций» может быть достаточно много внутри одного select’а.
3. ’name’ – вместо этого значения должно быть указано имя списка.
4. ’option 1’— имя первой опции в списке.
5. ’optionn’— имя последней опции в списке.

В предыдущем примере описано создание выпадающего списка. Нижеприведён Selectсо стандартным списком.

<select name=»’name’» size=»’numb’»>
<option value=»’option 1’» selected=»selected»>’option 1’</option>
<option value=»’option 2’»>’option 2’</option>
<option value=»’option …’»>’option …’</option>
<option value=»’option n’»>’option n’</option>
</select>

Где,

1. name—атрибут cименем Select’а.
2. size—атрибут, указывающий количество значений в списке.
3. value– значение элемента <option>в списке.
4. selected— атрибут, указывающий какой из option’ов выбран.

Методы Select’а.

В языке JavaScript доступны следующие методы элемента Select:

1. add() – добавление объекта в список.
2. remove()– удаление объекта в списке.
3. blur()–«теряет» фокус с окна выбора.
4. focus()– перемещение фокуса на окно.
5. handleEvent()– вызов обработчика необходимого события.
6. unwatch()– прекращает отслеживать свойство.
7. watch()– начинает отслеживать свойство.

Примеры использования

Add

SelectList.add(MyOption); // добавление объекта в список, данная конструкция равносильна этой SelectList.options[SelectList.options.length]=MyOption;

Remove

SelectList.remove(CurIndex); // удаление объекта из списка, данная конструкция равносильна такой
SelectList.options[СurIndex] = null;

Blur

function removeFocus(){
MyDoc.CurForm.SelectList.blur();
}// функция, использующая метод blur

<input type=BUTTON value=»Click to Remove Focus» name=»Button1″
onClick=»removeFocus()»> // вызов этой функции при нажатии на кнопку

Focus

<script>
input.onblur = function() {
if (!this.value.includes(‘@’)) {
// показывает ошибку, если строка не является email-адресом
this.SelectList.add(«error»); // добавление объекта
// возвращает фокус
input.focus();
} else {
this.SelectList.remove(«error»); // удаление объекта
}
};
</script>

HandleEvent

window.onClick = clickHandler;

function clickHandler{
window.MyDoc.CurForm.SelectList.handleEvent;
}

Watch и Unwatch

Пример кода:

varo = { p: 1 };
o.watch(‘p’, function (id, oldval, newval) {
console.log(‘o.’ + id + ‘ changed from ‘ + oldval + ‘ to ‘ + newval);
return newval;
}); // вызов метода watch и начало отслеживания заданного свойства
o.p = 2; // изменяем значение на 2
o.p = 3; // меняем значение на 3
deleteo.p; // удаляем значение
o.p = 4;
o.unwatch(‘p’);// вызов метода unwatch() для прекращения отслеживания свойства p
o.p = 5; // меняем значение p, но на экран ничего не выводится

Вывод:

o.p changed from 1 to 2
o.p changed from 2 to 3
o.p changed from undefined to 4

События для Select

Для Select’а существуют такие обработчики событий: onBlur, onChange и onFocus:

• OnBlur производит запуск кода тогда, когда фокус теряется окном.
• OnChange запускает код, если изменяется значение окна выбора.
• OnFocusже код запускает, когда окно выбора получает фокус.

Практическое применение событий

Применение события «change»:

<div id=»selection»></div>
<script>
var languagesSelect = CurForm.language; // элемент “select” с формыCurForm и именем “language”
function changeOption(){
var selection = document.getElementById(«selection»);
var selectedOption = languagesSelect.options[languagesSelect.selectedIndex];
selection.textContent = «Вы выбрали: » + selectedOption.text;
}
languagesSelect.addEventListener(«change», changeOption);// добавление события change
</script>

Использование событий Focus и Blur

<style>
.invalid { border-color: red; }
#error { color: red }
</style>
Ваш email: <input type=»email» id=»input»>
<div id=»error»></div>
<script>
input.onblur = function() {
if (!input.value.includes(‘@’)) { // не email
input.classList.add(‘invalid’);
error.innerHTML = ‘Пожалуйста, введите правильный email.’
}
};
input.onfocus = function() {
if (this.classList.contains(‘invalid’)) {
// удаляем индикатор ошибки, т.к. пользователь хочет ввести данные заново
this.classList.remove(‘invalid’);
error.innerHTML = «»;
}
};
</script>

Примеры использования select

Создание select в функции

<script>
function myFunction() {
var x = document.createElement(«SELECT»);
x.setAttribute(«id», «mySelect»);
document.body.appendChild(x);

var z = document.createElement(«option»);
z.setAttribute(«value», «volvocar»);
var t = document.createTextNode(«Volvo»);
z.appendChild(t);
document.getElementById(«mySelect»).appendChild(z);
}
</script>

Сдвиг элемента списка вверх или вниз

function shiftUpOption (oListbox, iIndex)
{
if (iIndex> 0)
{
var oOption = oListbox.options[iIndex];
var oPrevOption = oListbox.options[iIndex-1];
oListbox.insertBefore(oOption, oPrevOption);
}
};

function shiftDownOption (oListbox, iIndex)
{
if (iIndex<oListbox.options.length — 1)
{
var oOption = oListbox.options[iIndex];
var oNextOption = oListbox.options[iIndex+1];
oListbox.insertBefore(oNextOption, oOption);
}
};

Вызов функции

var objSel = document.getElementById(«mySelect»);
shiftDownOption (objSel, 1); //переместить второй элемент списка (с индексом 1) на первую позицию (с индексом 0)