Сейчас на сайте

  • [Bot] [Bot]
  • [Yahoo] [Yahoo]
Всего на сайте:
  • 1 гость
  • 2 роботов
Последними зарегистрировались:

Дни рождения

В ближайшем будущем дней рождения не предвидится




Правильный выбор доменного имениприносит успех в парковке доменаКомпонент зависимых выпадающих списков для Joomla 2.5 ZavispisКомпонент Matukio - русификация
Зависимые выпадающие списки select на Javascript PDF Печать E-mail
(6 голоса, среднее 4.00 из 5)
Автор: Slim888   
18.01.2012 00:12
Зависимые выпадающие списки select Не так давно у меня возникла задача сформировать поиск через зависимые списки. Единственное, что более-менее подошло из расширений – компонент MightyExtensions Resources с дополнением Select Relate – полями и фильтром. Но не очень хотелось пользоваться платным дополнением, да и для небольшой задачи использовать громоздкий компонент не совсем правильно.

В итоге я решил написать программу на Javascript. И, в связи с тем, что в интернете на удивление немного информации на тему зависимых выпадающих списков, постараюсь объяснить, как программа работает.

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

Итак, начнем!

Первым делом создаем форму зависимых выпадающих списков:

<form name="ChooseProduct" action="" method="post">
Выберите Страну:<br/>
<select name="Country" id="Coun" onchange="Country_change(this.value)">
<option selected="selected" value="NONE"></option>  
<option value="RUSSIA">Россия</option> 
<option value="UKRAIN">Украина</option>
<option value="USA">США</option>
</select>
<div style="display:none" id = "choose_place">
Искать по:<br/>
<select name="choose_select" id="choose_sel" onchange="choose_change(this.value)">
<option selected="selected" value="NONE"></option>
<option value="CITY">Городу</option>
<option value="FIRM">Фирме</option>
</select>
</div>
<div style="display:none" id = "City_place">
Выберите город:<br/>
<select name="City_select" id="City_sel" onchange="City_change(this.value)">
</select>
</div>
<div style="display:none" id = "Firm_place">
Выберите Фирму:<br/>
<select name="Firm_select" id="Firm_sel" onchange="Firm_change(this.value)">
</select>
</div>
</form>
<br/>

Первый select – это список стран с первым пустым полем. Ему присвоен id=Coun – по нему мы будем обращаться к списку из скрипта. Обработчик onchange="Country_change(this.value)" – при выборе нового значения (value) начнет выполняться функция Country_change. Option – соответственно значения элементов в списке. Selected – выбранный по умолчанию. Value указываем не числами, а названиями, чтобы не запутаться, так как обращение к конкретному значению происходит по value.

Блок выбора критерия поиска. Ему присвоен id, чтобы обращаться к нему и он изначально скрыт. Забегая вперед, скажу, что он «появится» при изменении значения списка стран.

Далее идет второй выпадающий зависимый список, аналогичный первому. Он предоставляет выбор из двух вариантов – по какому критерию будет производиться поиск (город или фирма).

Остальные блоки, аналогичны. В них заключены select, но они не заполнены. Их содержание будет зависеть от выбора пользователем страны.

Перед началом самой программы (скрипта), у нас есть еще 1 строчка:

<div style="width:100%"></div>

Это блок для информации, которую мы ищем. В соответствии с тем, что это будет, можно прописать стиль. В моем случае это таблица или таблицы – удобно растягивать их на всю ширину.

Если, к примеру, вы собираетесь использовать скрипт на нескольких страницах сайта, можно для удобства вынести стиль в отдельный класс. Будет это выглядеть так:

<div class=”infa”></div>

И в файле стилей прописываем:

.infa {width:100%}

Скрипт обработки зависимых select:

<script type="text/javascript"> 
var Counsel = document.getElementById("Coun"); 
// обращение к списку стран
var choosesel = document.getElementById("choose_sel"); 
// обращение к списку выбора критерия поиска (город/фирма);
var Citysel = document.getElementById("City_sel"); 
// обращение к списку городов
var Firmsel = document.getElementById("Firm_sel"); 
// обращение к списку фирм
var pepsel = document.getElementById("peptext"); 
// обращение к блоку, куда мы будем выводить информацию
 
/* массивы городов и фирм соответствующих странам*/
var Cities_Rus = new Array();   
Cities_Rus[0] = 'Москва';
Cities_Rus[1] = 'Санкт-Петербург';
Cities_Rus[2] = 'Тверь';
Cities_Rus[3] = 'Ярославль';
Cities_Rus[4] = 'Хабаровск';
Cities_Rus[5] = 'Волгоград';
 
var Cities_Ukr = new Array();
Cities_Ukr[0] = 'Киев';
Cities_Ukr[1] = 'Харьков';
Cities_Ukr[2] = 'Евпатория';
Cities_Ukr[3] = 'Львов';
Cities_Ukr[4] = 'Луганск';
 
var Cities_USA = new Array();
Cities_USA[0] = 'New York';
Cities_USA[1] = 'Los-Angeles';
Cities_USA[2] = 'Insmuth';
Cities_USA[3] = 'Racoon City';
 
var Firm_Rus = new Array();
Firm_Rus[0] = 'ООО Тазпром';
Firm_Rus[1] = 'ООО Тётьнефть';
Firm_Rus[2] = 'ЗАО Шестёрочка';
Firm_Rus[3] = 'ОАО Таблица вкуса';
Firm_Rus[4] = 'ООО ЭЙПатиа';
Firm_Rus[5] = 'ЗАО Репаойл';
 
var Firm_Ukr = new Array();
Firm_Ukr[0] = 'ООО Лиственница';
Firm_Ukr[1] = 'ООО Дубок';
Firm_Ukr[2] = 'ООО Ива';
Firm_Ukr[3] = 'ООО Вязик';
Firm_Ukr[4] = 'ЗАО Кипарисс';
 
var Firm_USA = new Array();
Firm_USA[0] = 'Umbrella inc';
Firm_USA[1] = 'Macrosoft';
Firm_USA[2] = 'Pineapple';
Firm_USA[3] = 'Stark industry';
Firm_USA[4] = 'Abobo tech';
 
/*массивы информации*/ 
var peps = new Array();
peps[0] = '/*Здесь мы вводим наш HTML-код 1-й строкой*/';
peps[1] = '/*Тут могут быть таблицы, рисунки*/';
peps[2] = '/*Комментарии в программе ставить не надо*/';
peps[3] = '/**/';
peps[4] = '/**/';
 
// Очищаем поле вывода информации
pepsel.innerHTML = '';

Переписывать обращения нужно для экономии места, времени и для удобства, так как обращаться мы будем часто. Можно добавить и другие обращения, например к блоку списка стран или фирм, но их 1-2 на всю программу – это не обязательно.

В Javascript элементы массива должны идти в 1 строчку. Иначе работать не будет. Поэтому сначала создаем элемент в каком-нибудь редакторе, а потом убираем переходы на новую строку и помещаем в соответствующий элемент массива.

Далее функции:

Смещение всех элементов зависимого select и удаление пустого элемента:

function shiftDownOption (oListbox, count)
{
  if (count < oListbox.options.length)
  {
    for (var i = 0;i < oListbox.options.length-1; i++)
            {
                        var oOption = oListbox.options[i];
            var oNextOption = oListbox.options[i+1];
            oListbox.insertBefore(oNextOption, oOption);
            }
            oListbox.options.length = oListbox.options.length - 1;
  }
}

oListbox - это любой список, например var Counsel или document.getElementById("Coun"), что одно и тоже.

Count – это количество значимых вариантов в select, то есть без учета пустого значения. В случае со странами – 3. Применяется функция указанием в скобках списка и числа, например:

shiftDownOption (Counsel, 3);

Нужно помнить, что если мы поставим не то число, то функция не сработает. При значении 4 ничего не произойдет, при значении 2 помимо удаления пустого элемента, удалится и 1 из стран.

Число является как бы ограничителем. Применяется данная функция в теле других функций, поэтому, чтобы она не уменьшала количество элементов в списке каждый раз при обращении к ней, введена такая конструкция. Конечно, если у нас списки на десятки элементов, возможно удобнее искать в select значение “NONE” и, при его наличии, проводить смещение элементов. Но в конкретной программе элементов 3 и 2, соответственно.

Функция действия по изменеию зависимого списка стран:

function Country_change(x) 
//Функция, которая активируется при изменении пользователем  страны
{
shiftDownOption (Counsel, 3); //Убираем 1-е пустое поле
document.getElementById("choose_place").style.display = 'block'; 
//Делаем поле "Искать по:" видимым
if (document.getElementById("City_place").style.display == 'block') 
//здесь мы проверяем, видим ли блок списка городов
 //Заполняем поле городов данной страны
{
Citysel.options.length = 0; //Обнуляем список городов
switch (x) // в зависимости от выбранной страны (x)
{
	case "RUSSIA": //если Россия
	{				
		for (var i = 0; i < Cities_Rus.length; i++)
   			Citysel.options[i] = new Option(Cities_Rus[i], i); 
//заполняем список городов городами России из массива
		pepsel.innerHTML = peps[2]+peps[3]; 
//здесь мы выводим в поле для информации значения, соответствующие 1 городу России, то есть Москве
//вместо + можно вставлять любые HTML-теги (переход на новую строку, например)
		break;
	}
	case "UKRAIN": //аналогично России
	{				
		for (var i = 0; i < Cities_Ukr.length; i++)
       	  		Citysel.options[i] = new Option(Cities_Ukr[i], i);
		pepsel.innerHTML = peps[1]+peps[4];
		break;
	}
	case "USA":
	{
		for (var i = 0; i < Cities_USA.length; i++)
	          	Citysel.options[i] = new Option(Cities_USA[i], i);
		pepsel.innerHTML = peps[3]+peps[4]+peps[0]+peps[2]+peps[1];
		break;
	}
}						
} 
if (document.getElementById("Firm_place").style.display == 'block')
//здесь мы проверяем, видим ли блок списка фирм
{ 
Firmsel.options.length = 0;
switch (x) // в зависимости от выбранной страны (x)
{
	case "RUSSIA": //если Россия
	{				
		for (var i = 0; i < Firm_Rus.length; i++)
        			Firmsel.options[i] = new Option(Firm_Rus[i], i);
//заполняем список фирм фирмами России из массива
		pepsel.innerHTML = peps[2]; 
// выводим в поле для информации значения, соответствующие 1 фирме России, то есть ООО Тазпром 
		break;
	}
	case "UKRAIN":
	{		
		for (var i = 0; i < Firm_Ukr.length; i++)
        	   		Firmsel.options[i] = new Option(Firm_Ukr[i], i);
		pepsel.innerHTML = peps[3];
		break;
	}
	case "USA":
	{				
		for (var i = 0; i < Firm_USA.length; i++)
          		Firmsel.options[i] = new Option(Firm_USA[i], i);
		pepsel.innerHTML = peps[1];
		break;
	}
      }						
   }
}

Теперь объясню подробнее, зачем все это нужно.

Мы делаем “видимым” блок с select выбора по какому критерию производить поиск. Заполнения же полей городов и фирм в пока не происходит, так как не проходят условия, что они видны:

if (document.getElementById("City_place").style.display == 'block')
if (document.getElementById("Firm_place").style.display == 'block')

select2

Поля города или фирмы выводятся в первый раз, когда изменяем параметр поиска. И если мы после этого решим поменять страну, тогда критерий поиска останется тот же, а значение в соответствующем поле (города/фирмы) станет равно [0] и блок вывода информации покажет нам информацию, соответствующую стране, критерию поиска и первому [0] значению списка, выбранного по критерию.

 

 

Функция действия по изменеию зависимого списка выбора критерия поиска:
function choose_change(x) //Изменение поиска по (город/фирма)
{
   shiftDownOption (choosesel, 2); // Убираем 1-е пустое поле списка “искать по:”
   pepsel.innerHTML = ''; //Обнуляем поле вывода информации
   switch (x) //заполняем поля в зависимости от выбора пользователем критерия поиска
   {
      case "CITY": //если выбран поиск по городу
      {
         if (document.getElementById("Firm_place").style.display == 'block')
// При выборе поиска по городу убираем поле поиска по фирме
            document.getElementById("Firm_place").style.display = 'none';
         Citysel.options.length = 0; // удаляем все элементы из select городов
         switch (Counsel.value) //Смотрим, какая выбрана страна
         {
            case "RUSSIA": // Если Россия
            {                    
               for (var i = 0; i < Cities_Rus.length; i++)
                  Citysel.options[i] = new Option(Cities_Rus[i], i); 
//заполняем список городов городами России из массива
               document.getElementById("City_place").style.display = 'block'; 
// делаем видимым блок городов
               pepsel.innerHTML = peps[3]; 
// выводим в поле для информации значения, соответствующие 1 городу России, то есть Москве
               break;
            }
            case "UKRAIN":
            {
               for (var i = 0; i < Cities_Ukr.length; i++)
                  Citysel.options[i] = new Option(Cities_Ukr[i], i);
               document.getElementById("City_place").style.display = 'block';
               pepsel.innerHTML = peps[3]+peps[4];
               break;
            }
            case "USA":
            {
               for (var i = 0; i < Cities_USA.length; i++)
                  Citysel.options[i] = new Option(Cities_USA[i], i);
               document.getElementById("City_place").style.display = 'block';
               pepsel.innerHTML = peps[2];
               break;
            }
         }                    
      break;
      }
      case "FIRM":
      {
         if (document.getElementById("City_place").style.display == 'block') 
//если выбран поиск по фирмам
            document.getElementById("City_place").style.display = 'none';
// убираем поле select по городам
         Firmsel.options.length = 0;
         switch (Counsel.value) //Смотрим, какая страна выбрана
         {
            case "RUSSIA"://если Россия
            {                    
               for (var i = 0; i < Firm_Rus.length; i++)
//заполняем список фирм фирмами России из массива
                  Firmsel.options[i] = new Option(Firm_Rus[i], i);
               document.getElementById("Firm_place").style.display = 'block'; 
//делаем видимым блок select фирм
               pepsel.innerHTML = peps[2]; 
//выводим в поле для информацию информацию по первой [0] фирме России
               break;
            }
            case "UKRAIN":
            {                    
               for (var i = 0; i < Firm_Ukr.length; i++)
                  Firmsel.options[i] = new Option(Firm_Ukr[i], i);
               document.getElementById("cartriges_place").style.display = 'block';
               pepsel.innerHTML = peps[3];
               break;
            }
            case "USA":
            {
               for (var i = 0; i < Firm_USA.length; i++)
                  Firmsel.options[i] = new Option(Firm_USA[i], i);
               document.getElementById("Firm_place").style.display = 'block';
               pepsel.innerHTML = peps[1];
               break;
            }
         }                    
      break;
      }
   }
}

Если мы поменяем страну, то сразу получим select города или фирмы соответствующей страны (смотря, что выбрано в критерии поиска), в select будет выделен первый элемент и ниже будет информация по нему.

Удаление элементов select нужно для того, чтобы они не смешались, то есть если у нас был выбран производитель Россия и поиск по городам, то в select городов мы видим 6 городов. Если теперь поменять страну, то на место 5 перезапишутся города другой страны, но 6 город останется прежним - из массива городов России.

Итак, мы подходим к концу. Осталось 2 функции, зато самые важные:

Функция действия по изменеию зависимого выпадающего списка городов:
function City_change(x) 
//Действие по изменению колонки города; x - выбранный город из массива соответствующего стране
{
   switch (Counsel.value) // Проверяем, какая страна выбрана в первом select
   {
      case "RUSSIA": //Выводим информацию по городам России
      {
         if (x == 0 || x == 4) // если выбран 1[0] или 5[4] город, то
            pepsel.innerHTML = peps[2]+peps[3]; 
// мы выводим информацию из массива [2] и [3]
         else //иначе (города 2[1], 3[2], 4[3])
            pepsel.innerHTML = peps[0]+peps[2]; 
// мы выводим информацию из массива peps[0] и peps[2]
         break;
      }
      case "UKRAIN": //Выводим информацию по городам Украины
      {
         if (x == 1 || x == 2)
            pepsel.innerHTML = peps[2]+peps[3];
         if (x == 0 || x == 4)
            pepsel.innerHTML = peps[1]+peps[4];
         if (x == 3)
            pepsel.innerHTML = peps[0];
         break;
      }
      case "USA": //Выводим информацию по городам США
      {
         if (x == 2 || x == 3)
            pepsel.innerHTML = peps[3]+peps[4];
         else
            pepsel.innerHTML = peps[3]+peps[4]+peps[0]+peps[2]+peps[1];
         break;
      }
   }
}

Функция действия по изменеию зависимого списка select фирм:

function Firm_change(x) 
// Действие по изменению колонки фирм; x - выбранная фирма из массива соответствующей страны
{
   switch (Counsel.value) // Проверяем, какая страна выбрана в первом select
   {
      case "RUSSIA": //Выводим информацию по фирмам России
      {
         if (x == 2 || x == 4)
            pepsel.innerHTML = peps[2]+peps[3];
         else
            pepsel.innerHTML = peps[0]+peps[2];
         break;
      }
      case "UKRAIN": //Выводим информацию по фирмам Украины
      {
         if (x == 0 || x == 3)
            pepsel.innerHTML = peps[1]+peps[3];
         if (x == 1 || x == 2)
            pepsel.innerHTML = peps[1]+peps[4];
         if (x == 4)
            pepsel.innerHTML = peps[0];
         break;
      }
      case "USA": //Выводим информацию по фирмам США
      {
         if (x == 1 || x == 4)
            pepsel.innerHTML = peps[3]+peps[4];
         else
            pepsel.innerHTML = peps[3]+peps[4]+peps[0]+peps[2]+peps[1];
         break;
      }
   }
}

Так можно реализовать зависимые выпадающие списки не очень большого размера. Конечно, удобнее и правильнее брать информацию для select из базы данных, но опять же при небольших объемах Javascript вполне уместен.

 ---СКАЧАТЬ ПРИМЕР---

Спрашивайте, отвечу, объясню, помогу!

Обновлено 26.02.2013 10:12
 

Комментарии
Добавлен: 5 года, 2 мес. назад wodan #122
А как сделать так, чтобы все три списка были зависимыми, т.к. хочется создать структуру поиска: Страна - Область - Город.
А в данный момент второй уровень выбора остается независим: по фирме или по городу.
Добавлен: 5 года, 2 мес. назад Slim888 #123
Здравствуйте!
Ну, в принципе, там не сложно. Только если у Вас много городов и областей, то тут получится много массивов на каждый селект.
Прикрепляю файл. В нем, если выбрать Россию, а в след списке первые три города, то появляется третий селект, который заполнен в зависимости от выбора города (массивы новые не делал - взял фирмы).

P.S. Выходные, сами понимаете - набросал на скорую руку. Если не разберетесь, пишите - в понедельник помогу поконкретнее.
-->Скачать<--
Добавлен: 4 года, 10 мес. назад LeDevitz #212
Здравствуйте!
Помогите пожалуйста разобраться с "Зависимые выпадающие списки select на Javascript", какие, куда скриты?? Зарание спасибо!
Добавлен: 4 года, 10 мес. назад Slim888 #213
LeDevitz написал:
Здравствуйте!
Помогите пожалуйста разобраться с "Зависимые выпадающие списки select на Javascript", какие, куда скриты?? Зарание спасибо!


Здравствуйте)
Саму форму и div'ы ставим на страницу в то место, где хотите, чтобы выводились сами списки, а скрипт в любом месте страницы. У меня, например, он стоит после вывода формы. Наоборот не пробовал, но, по идее, тоже должно работать)

Если вы хотите, привинтить вывод зависимых списков к какой-то CMS, то и скрипт, и форму надо засунуть в материал. Только предварительно разрешить в настройках редактора и самой CMS Javascript в материалах.

P.S. Вы написали скрипты, но скрипт только 1. Просто в нем сначала объявляются все переменные (массивы стран, например), а потом идут все функции. Порядок функций не важен.
Интересная статья? Поделись ей с другими: