Меню
Атрибут SELECT multiple даёт возможность выбрать несколько опций одновременно, что превращает его в список SELECT множественного выбора.
<SELECT name="SelectMyLove" id="SelectMyLove" multiple size="3" >
Выбор нескольких строк осуществляется при помощи курсора мышки c одновременно нажатой клавишей Сtrl или Shift
Свойство size объекта SELECT c указанным свойством multiple, показывает количество одновременно отображаемых строк.
Что бы отправить на сервер все выбранные значения SELECT multiple в виде массива и обработать этот массив, например в виде массива на PHP, необходимо к имени элемента добавить [] (квадратные скобки) иначе на сервер отправиться значение
<SELECT name="SelectMyLove[]" id="SelectMyLove" multiple size="3" >
Что бы запретить выбор элемента из списка SELECT multiple, но при этом оставить этот элемент в списке необходимо в атрибуте OPTION этого элемента установить его свойство disabled в положение true: disabled="disabled"
document.getElementById("SelectMyLove").options[n].disabled="disabled";
// или
<OPTION disabled="disabled" VALUE="2">Персик</OPTION>
Чтобы вновь разрешить выбор элемента из списка SELECT multiple необходимо атрибут disabled установить в положение false:
document.getElementById("SelectMyLove").options[n].disabled=false;
Что бы получить все выбранные значения SELECT multiple необходимо в цикле проверить у каких элементов свойство
options[n].selected==true
Ниже приведён пример функции
SelectShow() которая выводит на печать все выбранные пользователем элементы.
<html>
<head>
<title>
</title>
</head>
<body>
<script type="text/javascript">
function SelectShow()
{
var len= document.getElementById("SelectMyLove").options.length;
var SelectElements = new Array;
var i =0;
for (var n = 0; n < len; n++)
{
if (document.getElementById("SelectMyLove").options[n].selected==true)
{
SelectElements[i]=document.getElementById("SelectMyLove").options[n].text;
i++;
}
}
document.write(SelectElements.toString());
document.close();
}
</script>
<FORM id="FormMyLove" name="FormMyLove">
<SELECT name="SelectMyLove[]" id="SelectMyLove" multiple size="3">
<OPTION VALUE="0">Айва</OPTION>
<OPTION SELECTED VALUE="1">Абрикос</OPTION>
<OPTION disabled=true VALUE="2">Персик</OPTION>
<OPTION VALUE="3">Слива</OPTION>
<OPTION VALUE="7">Груша</OPTION>
</SELECT>
</FORM>
<br />
<button onClick="SelectShow()">Применить</button>
</body>
</html>
Ещё Вас заинтересует пример как добавить и удалить элементы из SELECT multiple.
