Списки
Для создания списка используется html-элемент select, с его помощью можно создавать как выпадающие списки, так и обычные с одинарным или множественным выбором. Например, стандартный список:
<select name="language" size="4">
<option value="JS" selected="selected">JavaScript</option>
<option value="Java">Java</option>
<option value="C#">C#</option>
<option value="C++">C++</option>
</select>Атрибут size позволяет установить, сколько элементов будут отображаться одномоментно в списке. Значение size="1" отображает только один элемент списка, а сам список становится выпадающим. Если установить у элемента select атрибут multiple, то в списке можно выбрать сразу несколько значений.
Каждый элемент списка представлен html-элементом option, у которого есть отображаемая метка и есть значения в виде атрибута value. В JavaScript элементу select соответствует объект HTMLSelectElement, а элементу option - объект HtmlOptionElement или просто Option.
Все элементы списка в javascript доступны через коллекцию options. А каждый объект HtmlOptionElement имеет свойства: index индекс в коллекции options, text отображаемый текст и value значение элемента. Например, получим первый элемент списка и выведем о нем через его свойства всю информацию:
<form name="myForm">
<select name="language" size="4">
<option value="JS" selected="selected">JavaScript</option>
<option value="Java">Java</option>
<option value="CS">C#</option>
<option value="CPP">C++</option>
</select>
</form>
<script>
var firstLanguage = myForm.language.options[0];
document.write("Index: " + firstLanguage.index + "<br/>");
document.write("Text: " + firstLanguage.text + "<br/>");
document.write("Value: " + firstLanguage.value + "<br/>");
</script>В javascript мы можем не только получать элементы, но и динамически управлять списком. Например, применим добавление и удаление объектов списка:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form name="myForm">
<select name="language" size="5">
<option value="JS" selected="selected">JavaScript</option>
<option value="Java">Java</option>
<option value="CS">C#</option>
<option value="CPP">C++</option>
</select>
<p><input type="text" name="textInput" placeholder="Введите текст" /></p>
<p><input type="text" name="valueInput" placeholder="Введите значение" /></p>
<p><input type="button" name="addButton" value="Добавить" /><input type="button" name="removeButton" value="Удалить" /></p>
</form>
<script>
var addButton = myForm.addButton,
removeButton = myForm.removeButton,
languagesSelect = myForm.language;
// обработчик добавления элемента
function addOption(){
// получаем текст для элемента
var text = myForm.textInput.value;
// получаем значение для элемента
var value = myForm.valueInput.value;
// создаем новый элемента
var newOption = new Option(text, value);
languagesSelect.options[languagesSelect.options.length]=newOption;
}
// обработчик удаления элемент
function removeOption(){
var selectedIndex = languagesSelect.options.selectedIndex;
// удаляем элемент
languagesSelect.options[selectedIndex] = null;
}
addButton.addEventListener("click", addOption);
removeButton.addEventListener("click", removeOption);
</script>
</body>
</html>Для добавления на форме предназначены два текстовых поля, для текстовой метки и значения элемента option и кнопка. Для удаления выделенного элемента предназначена еще одна кнопка.
За добавление в коде javascript отвечает функция addOption, в которой получаем введенные в текстовые поля значения, создаем новый объект Option и добавляем его в массив options объекта списка.
За удаление отвечает функция removeOption, в которой просто получаем индекс выделенного элемента с помощью свойства selectedIndex и в коллекции options приравниваем по этому индексу значение null.
Для добавления/удаления также в качестве альтернативы можно использовать методы элемента select:
// вместо вызова languagesSelect.options[languagesSelect.options.length]=newOption; использовать для добавления вызов метода add
languagesSelect.add(newOption);
// вместо вызова languagesSelect.options[selectedIndex] = null; использовать для удаления метод remove languagesSelect.remove(selectedIndex);События элемента select
Элемент select поддерживает три события: blur потеря фокуса, focus получение фокуса, change изменение выделенного элемента в списке. Рассмотрим применение события select:
<form name="myForm">
<select name="language" size="5">
<option value="JS" selected="selected">JavaScript</option>
<option value="Java">Java</option>
<option value="CS">C#</option>
<option value="CPP">C++</option>
</select>
</form>
<div id="selection"></div>
<script>
var languagesSelect = myForm.language;
function changeOption(){
var selection = document.getElementById("selection");
var selectedOption = languagesSelect.options[languagesSelect.selectedIndex];
selection.textContent = "Вы выбрали: " + selectedOption.text;
}
languagesSelect.addEventListener("change", changeOption);
</script>