Меню
раздел: select multiple

Список SELECT multiple


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

Ещё в этом разделе: