Список select
Для создания списка используется html-элемент select. Причем с его помощью можно создавать как выпадающие списки, так и обычные с ординарным или множественным выбором. Например, стандартный список:
<select name="language" size="4"> <option value="JS" selected="selected">JavaScript <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 value="Java">Java</option>
<option value="C#">C#</option>
<option value="C++">C++</option>
</select>
</form>
<script>
var firstLanguage = myForm.language.options[0];
document.write("Index: " + firstLanguage.index + "
");
document.write("Text: " + firstLanguage.text + "
");
document.write("Value: " + firstLanguage.value + "
");
</script>
В javascript мы можем не только получать элементы,
но и динамически управлять списком.
Например, применим добавление и удаление объектов списка:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form name="myForm">
<select name="language" size="4">
<option value="JS" selected="selected">JavaScript
<option value="Java">Java</option>
<option value="C#">C#</option>
<option value="C++">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 поддерживает три события:
<form name="myForm"> <select name="language" size="4"> <option value="JS" selected="selected">JavaScript <option value="Java">Java</option> <option value="C#">C#</option> <option value="C++">C++</option> </select> </form> <div id="selection">