Список select

Последнее обновление: 1.11.2015

Для создания списка используется 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>
Элемент select в JavaScript

В 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.

Добавление и удаление элементов списка в JavaScript

Для добавления/удаления также в качестве альтернативы можно использовать методы элемента 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>
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850