Меню
раздел:Связанные select (динамические select) - как добавить элементы в список select и удалить элементы из списка

Связанные select (динамические select) - как добавить элементы в список select (add option to select) и удалить элементы из списка (remove option from select)

Создадим динамический список SELECT на javascript в который автоматически будут добавляются элементы с тегом <option>.
А так же посмотрим как удалить (remove option from select) выделенные элементы option из списка SELECT.

Для этого используем два связанных списка SELECT - имеется вввиду, что при выборе элемента в одном списке в другой который изначально пустой будут подставляются связанные с этим выбранным элементом значения.

Это связанность достигается за счёт того, что к обработчику события, например onChange(), одного списка вы привязываете, например функцию - в которой содержится ссылка на другой SELECT тот который вам надо изменить.

Для создания списка будем использовать конструктор Option который определён в стандарте the Option Element со следующим синтаксисом:

//text - текстовое значение элемента (строка или число)
// value - value элемента (число)
// defaultSelected - выбор элемента по умолчанию (true или false)
//selected текущий выбор - выбран или нет элемент (true или false)

option = new Option( text, value, defaultSelected, selected);


В качестве примера, из предлагаемого списка SELECT, выберем страну и курорт в ней на который поедем отдыхать.
Для этого список курортов, соответствующий каждой стране занесём в массивы,


var australia = new Array("Аделаида","Барьерный Риф","Голубые Горы","Золотое побережье");
var bagams= new Array("Андрос","Гранд Багама остров","Лонг","Нассау");
var egi= new Array("Луксор","Александрия","Асуан","Хургада");

 

и организуем два списка SELECT один пустой c атрибутом multiple и [] в имени в который динамически будут добавлены нужные элементы <option> т.е. наши курорты, в другом будут соответствующие страны.


<SELECT name="SelectMyLove" id="SelectMyLove" onChange="Add_option_to_select();">
<OPTION VALUE="1">Страна в которую едем</OPTION>
<OPTION Selected VALUE="2">Австралия</OPTION>
<OPTION VALUE="3">Багамские острова</OPTION>
<OPTION VALUE="4">Египет</OPTION>
</SELECT>

<SELECT name="resort[]" id="resort" multiple size="5" style="width:250px;"></SELECT>



Вначале создадим ссылку на список для курортов т.е. на тот SELECT в который необходимо добавить элементы.


 var ResortObj = document.getElementById("resort");


добавлять элементы в массив options этого списка будем вызывая конструктор Option этот пример реализован в функции Add_option_to_select().


 // использование конструктора options
 // ResortObj[0] - первый элемент массива options в списке SELECT
 ResortObj[0] = new Option("Луксор", "0");


	function Add_option_to_select()
	{
	   var CountryObj = document.getElementById("SelectMyLove");
	   var ResortObj = document.getElementById("resort");

  /////////////////////////////////////////////////////////////////////////////////////
  // selectedIndex - порядковый номер выбранного элемента (страны) - что это такое
  //selectedIndex смотрите в статье
  //  Список SELECT javascript (select js) и его методы

	 var selind = CountryObj.options.selectedIndex;
   //////////////////////////////////////////////////////

	 switch (selind)
	  {
	  case 1:
	      // очищаем список курортов если он был не пустой
	       ResortObj.options.length = 0;

	    len= australia.length;
	  // заполняем наш список SELECT с курортами значениями из того массива
	  // который относится к выбранной стране.
	    for (var n = 0; n < len; n++)
	    {
	       ResortObj[n] = new Option(australia[n], n);
	    }

	 }

 }

 


При выборе пункта "Страна в которую едем" удаляем курорты относящиеся к прежней стране для этого будем полностью очищать список используя подсвойство length массива options объекта Select с его помощью установим размер массива равный нулю и тогда все текущие элементы будут удалены (remove option from select).

ResortObj.options.length = 0;

С помощью подсвойства length также можно добавлять новые элементы в конец списка SELECT получив размер всего списка - смотрите пример в функции Present().

 ResortObj.options[ResortObj.options.length] = new Option("Луксор", "1");


или если известен размер массива добавить элементы в конец списка можно по другому:

 // length==2
 l.options.length=3; //добавляем в конец списка пустой элемент
 l.options[0].text = "Луксор";
 l.options[0].value = "3";
 

А также подсвойство length можно использовать для обращения к последнему элементу списка - это особенно удобно если не известен размер всего массива options

  ResortObj.options[ResortObj_Pres.options.length-1]


При использовании подсвойства length необходимо учесть, что:
1.Если значение length будет задано больше чем количество существующих элементов то в список будут добавлены пустые строки.
2.Если меньше, то список будет укорочен до длины length

Пример добавления элемента option в конец списка SELECT реализовано в функции Present():


  function Present()
 {
  var ResortObj_Pres = document.getElementById("resort");
  var len= ResortObj_Pres.options.length;

  if(len>0)
  {
       ResortObj_Pres.options[len] = new Option("Вы едете бесплатно!", len);

       ResortObj_Pres.options[len].style.color="red";
   }else
       {
       	alert("Сейчас список курортов пуст элемент добавляется в конец списка!");
       }
 }


Что бы удалить элемент options из списка воспользуемся методом:
remove(in long index); который относится к DOM интерфейсу SELECT.
Где in long index - это индекс в массиве options удаляемого элемента:

   // удалить второй элемент списка счёт в массиве ведётся с нуля
   ResortObj.remove(1);
 


Теперь, на основании всего вышеизложенного, мы можем написать функцию Remove_option_from_select() которая удалит выделенные нами элементы option из списка select multiple.

В статье Список SELECT multiple мы увидели как получить все выбранные пользователем значения SELECT multiple, а дальше, обращаясь к индексу каждого выбранного элемента мы будем его удалять.
Удаление элементов реализовано в функции Remove_option_from_select():


 function Remove_option_from_select()
 {
  var len= document.getElementById("resort").options.length;

  if(len>0)
  {
     var ResortObj_r = document.getElementById("resort");

   for (var n = len-1; n>-1; n--)
   {
          // получаем индекс выбранного элемента
      if (ResortObj_r.options[n].selected==true)
      {
            ResortObj_r.remove(n);
      }

    }

  }else
       {
         alert("Удалять нечего - список пуст");
       }

 }
  


Полностью пример динамического списка SELECT (связанных SELECT), на javascript, c возможностью добавления и удаления option выглядит так:


// Рабочий пример
 
Выбираем страну

 Список курортов

Удалить выбранные элементы из SELECT multiple

Добавить элемент в конец списка SELECT multiple
// Исходный код примера с SELECT <html> <head> <title> </title> </head> <body> <script type="text/javascript"> var australia = new Array("Аделаида","Барьерный Риф","Голубые Горы","Золотое побережье"); var bagams= new Array("Андрос","Гранд Багама остров","Лонг","Нассау"); var egi= new Array("Луксор","Александрия","Асуан","Хургада"); var len; function Remove_option_from_select() { var len= document.getElementById("resort").options.length; if(len>0) { var ResortObj_r = document.getElementById("resort"); for (var n = len-1; n>-1; n--) { // получаем индекс выбранного элемента if (ResortObj_r.options[n].selected==true) { ResortObj_r.remove(n); } } }else { alert("Удалять нечего - список пуст"); } } function Add_option_to_select() { var CountryObj = document.getElementById("SelectMyLove"); var ResortObj = document.getElementById("resort"); var selind = CountryObj.options.selectedIndex; switch (selind) { case 0: ResortObj.options.length = 0; break; case 1: ResortObj.options.length = 0; len= australia.length; // alert(len); for (var n = 0; n < len; n++) { ResortObj[n] = new Option(australia[n], n); } break; case 2: ResortObj.options.length = 0; len= bagams.length; for (var n = 0; n < len; n++) { ResortObj[n] = new Option(bagams[n], n); } break; case 3: ResortObj.options.length = 0; len= bagams.length; for (var n = 0; n < len; n++) { ResortObj[n] = new Option(egi[n], n); } break; } } function Present() { var ResortObj_Pres = document.getElementById("resort"); var len= ResortObj_Pres.options.length; if(len>0) { ResortObj_Pres.options[len] = new Option("Вы едете бесплатно!", len); ResortObj_Pres.options[len].style.color="red"; }else { alert("Сейчас список курортов пуст элемент добавляется в конец списка!"); } } </script> <FORM id="country" name="country" method="GET" action="select_b.php" > <table> <tr><td valign="top"> Выбираем страну <br /><br /> <SELECT name="SelectMyLove" id="SelectMyLove" onChange="Add_option_to_select();"> <OPTION VALUE="1">Страна в которую едем</OPTION> <OPTION VALUE="2">Австралия</OPTION> <OPTION VALUE="3">Багамские острова</OPTION> <OPTION VALUE="4">Египет</OPTION> </SELECT> </td> <td valign="top"> Список курортов <br /><br /> <SELECT name="resort[]" id="resort" multiple size="5" style="width:250px;"></SELECT> </td> </tr> <tr> <td> </td> <td> <a href="#" onClick="Remove_option_from_select()">Удалить выбранные элементы из SELECT </a> <br /><br /> <a href="#" onClick="Present();">Добавить элемент в конец списка SELECT</a> </td> </tr> </table> </FORM> </body> </html>


Что бы показать основные принципы работы со связанными списками SELECT мы брали значения для option из массивов которые мы задали в нашем листинге, но те же принципы используются и при обработке массива подгруженного методом AJAX с сервера.

Так же возможно Вас заинтересует: Стилизация SELECT методами javascript

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