Атрибут 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.