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

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

Дни рождения

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




Правильный выбор доменного имениприносит успех в парковке доменаКомпонент зависимых выпадающих списков для Joomla 2.5 ZavispisКомпонент Matukio - русификация
Добро пожаловать, Гость
Логин: Пароль: Запомнить меня

Зависимые выпадающие списки select на Javascript
(1 чел.) (1) гость
Все о Javascript!
  • Страница:
  • 1

ТЕМА: Зависимые выпадающие списки select на Javascript

Зависимые выпадающие списки select на Javascript 5 года, 8 мес. назад #39

  • Slim888
  • Вне сайта
  • Эксперт
  • Crazy!!!
  • Постов: 97
  • Репутация: 5
Зависимые выпадающие списки 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 вполне уместен.

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

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

Подробнее...
Лёх, ты че сделал??? Ч-чини давай!!!

Re: Зависимые выпадающие списки select на Javascript 5 года, 2 мес. назад #122

  • wodan
  • Вне сайта
  • Пользователь
  • Постов: 1
  • Репутация: 0
А как сделать так, чтобы все три списка были зависимыми, т.к. хочется создать структуру поиска: Страна - Область - Город.
А в данный момент второй уровень выбора остается независим: по фирме или по городу.

Re: Зависимые выпадающие списки select на Javascript 5 года, 2 мес. назад #123

  • Slim888
  • Вне сайта
  • Эксперт
  • Crazy!!!
  • Постов: 97
  • Репутация: 5
Здравствуйте!
Ну, в принципе, там не сложно. Только если у Вас много городов и областей, то тут получится много массивов на каждый селект.
Прикрепляю файл. В нем, если выбрать Россию, а в след списке первые три города, то появляется третий селект, который заполнен в зависимости от выбора города (массивы новые не делал - взял фирмы).

P.S. Выходные, сами понимаете - набросал на скорую руку. Если не разберетесь, пишите - в понедельник помогу поконкретнее.
-->Скачать<--
Лёх, ты че сделал??? Ч-чини давай!!!

Re: Зависимые выпадающие списки select на Javascript 4 года, 10 мес. назад #212

  • LeDevitz
  • Вне сайта
  • Пользователь
  • Постов: 1
  • Репутация: 0
Здравствуйте!
Помогите пожалуйста разобраться с "Зависимые выпадающие списки select на Javascript", какие, куда скриты?? Зарание спасибо!

Re: Зависимые выпадающие списки select на Javascript 4 года, 10 мес. назад #213

  • Slim888
  • Вне сайта
  • Эксперт
  • Crazy!!!
  • Постов: 97
  • Репутация: 5
LeDevitz написал:
Здравствуйте!
Помогите пожалуйста разобраться с "Зависимые выпадающие списки select на Javascript", какие, куда скриты?? Зарание спасибо!


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

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

P.S. Вы написали скрипты, но скрипт только 1. Просто в нем сначала объявляются все переменные (массивы стран, например), а потом идут все функции. Порядок функций не важен.
Лёх, ты че сделал??? Ч-чини давай!!!
Изменено: 4 года, 9 мес. назад от Slim888.

Re: Зависимые выпадающие списки select на Javascript 4 года, 7 мес. назад #226

  • pro_ef
  • Вне сайта
  • Пользователь
  • Постов: 1
  • Репутация: 0
как увеличить кол-во стран городов и фирм

Re: Зависимые выпадающие списки select на Javascript 4 года, 7 мес. назад #227

  • Slim888
  • Вне сайта
  • Эксперт
  • Crazy!!!
  • Постов: 97
  • Репутация: 5
Аналогично.

Надо добавить в список стран нужную страну, например:
<option value="FRANCE">Франция</option>

Далее создать массив из городов:
Cities_Fra[0] = 'Париж';
Cities_Fra[1] = 'Бордо';

и фирм:
Firm_Fra[0] = 'ООО фирма Франции1';
Firm_Fra[1] = 'ООО фирма Франции2';

Добавляем в массив вывода информации значения:
peps[5]='';
peps[5]='';

Показываем, что выводить при смене страны если выбран город:
	
case "FRANCE": //если Франция
	{				
		for (var i = 0; i < Cities_Fra.length; i++)
   			Citysel.options[i] = new Option(Cities_Fra[i], i); 
//заполняем список городов городами Франции из массива
		pepsel.innerHTML = peps[6]+peps[6]; 
//здесь мы выводим в поле для информации значения, соответствующие 1 городу Франции, то есть Париж
//вместо + можно вставлять любые HTML-теги (переход на новую строку, например)
		break;
	}

и если выбрана фирма:
case "FRANCE": //если Франция
	{				
		for (var i = 0; i < Firm_Fra.length; i++)
        			Firmsel.options[i] = new Option(Firm_Fra[i], i);
//заполняем список фирм фирмами Франции из массива
		pepsel.innerHTML = peps[5]; 
// выводим в поле для информации значения, соответствующие 1 фирме Франции, то есть ООО фирма Франции1 
		break;
	}

Прописываем, что показывать и делать при измекнении поиска по городам:
case "АКФТСУ": // Если Франция
            {                    
               for (var i = 0; i < Cities_Fra.length; i++)
                  Citysel.options[i] = new Option(Cities_Fra[i], i); 
//заполняем список городов городами Франции из массива
               document.getElementById("City_place").style.display = 'block'; 
// делаем видимым блок городов
               pepsel.innerHTML = peps[5]+peps[6]; 
// выводим в поле для информации значения, соответствующие 1 городу Франции, то есть Парижу
               break;
            }

или фирмам:
            case "FRANCE"://если Франция
            {                    
               for (var i = 0; i < Firm_Fra.length; i++)
//заполняем список фирм фирмами Франции из массива
                  Firmsel.options[i] = new Option(Firm_Fra[i], i);
               document.getElementById("Firm_place").style.display = 'block'; 
//делаем видимым блок select фирм
               pepsel.innerHTML = peps[5]; 
//выводим в поле для информацию информацию по первой [0] фирме Франции
               break;
            }

Ну и что выводить при выборе из списка страны:
case "FRANCE": //Выводим информацию по городам Франции
      {
         if (x == 0) // если выбран 1[0] город, то
            pepsel.innerHTML = peps[5]+peps[6]; 
// мы выводим информацию из массива [5] и [6]
         else //иначе (город 2[1])
            pepsel.innerHTML = peps[6]; 
// мы выводим информацию из массива peps[6]
         break;
      }

и фирм:
case "FRANCE": //Выводим информацию по фирмам Франции
      {
         if (x == 0)
            pepsel.innerHTML = peps[5];
         else
            pepsel.innerHTML = peps[6];
         break;
      }
Лёх, ты че сделал??? Ч-чини давай!!!

Re: Зависимые выпадающие списки select на Javascript 4 года, 6 мес. назад #229

  • Slim888
  • Вне сайта
  • Эксперт
  • Crazy!!!
  • Постов: 97
  • Репутация: 5
Создан компонент списков для Joomla 2.5. В ближайшее время будет доступен для скачивания на сайте!))
Лёх, ты че сделал??? Ч-чини давай!!!

Re: Зависимые выпадающие списки select на Javascript 4 года, 1 мес. назад #235

  • 777
  • Вне сайта
  • Пользователь
  • Постов: 1
  • Репутация: 0
Помогите с решением вопроса. Каким образом можно связать между собой два выпадающих списка? Например, в левом списке выбираем год (2012) события, а в правом само событие (Формула-1), после выбора последнего необходимо, чтобы открывалась страница с этим событием произошедшим в 2012 году (допустим турнирная лестница). Затем при смене года (2007), чтобы открывалась страница турнирной лестницы по Формуле-1 2007 г. Далее при смене события (ДТМ), год оставляем тот же открывалась страница турнирной лестницы по ДТМ 2007 года. Как-то так .

Уж очень хочется реализовать идею, а вот знаний, к сожалению, только набираюсь.

Re: Зависимые выпадающие списки select на Javascript 4 года, 1 мес. назад #236

  • Slim888
  • Вне сайта
  • Эксперт
  • Crazy!!!
  • Постов: 97
  • Репутация: 5
Добрый день. На Joomla 2.5 лучшее решение для такой задачи - компонент www.redko-metko.ru/komponent_zavisimich_...la_2.5_zavispis.html
Лёх, ты че сделал??? Ч-чини давай!!!

Re: Зависимые выпадающие списки select на Javascript 3 года, 11 мес. назад #237

  • FerrisBuller
  • Вне сайта
  • Пользователь
  • Постов: 1
  • Репутация: 0
Скажите пожалуйста, как реализовать скрипт, в котором от выбора option зависит следующий селект и при этом, когда выбираешь option меняется фото, которая располагается в этом же окне.

Я написал вот такой скрипт, но не знаю, как фотки прикрепить к option, пример можно увидеть на testmagaz.tw1.ru/wp-content/themes/magaz15/redactor.html

<html>
	<head>
	<title>Документ без названия</title>
	<script type="text/javascript" src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/linkedselect.js"></script>
        </head>

<body>
<script language="JavaScript"> 
<!-- 
function l_image (a) 
{ 
document.images [0] .src=a 
} 
--> 
</script>  
<table cols="2" width="90%" border="0">
<tr><td>
    <p><select id="List1" onchange="changeimage(this.value)">
    <option value="white">White</option>
    <option value="black">Black</option>
    </select></p>
    <p><select id="List2"></select></p>
    <p><select id="List3"></select></p></td>
<td align="center" valign="center"><img src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg" name="tool" ></td>
</tr>
</table>

<script type="text/javascript">
var syncList1 = new syncList
syncList1.dataList = { 

    'white':{
        'white_1':'обычная',
        'white_2':'приталинная'
    },    
    'black':{
        'black_1':'обычная ч',
        'black_2':'приталинная ч'
    },    
    'white_1':{
        'white_1_1':'обычная с 2 пуговицами',
        'white_1_2':'обычная с 3 пуговицами'
    },
    'white_2':{
        'white_2_1':'приталинная с 2 пуговицами',
        'white_2_2':'приталинная с 3 пуговицами'
    },
    'black_1':{
        'black_1_1':'обычная ч с 2 пуговицами',
        'black_1_2':'обычная ч с 3 пуговицами'
    },
    'black_2':{
        'black_2_1':'приталинная с 2 пуговицами',
        'black_2_2':'приталинная с 3 пуговицами'
    }
};

syncList1.sync("List1","List2","List3");
</script>


</body>
</html>	
 


Заранее благодарен!

Re: Зависимые выпадающие списки select на Javascript 3 года, 11 мес. назад #238

  • Slim888
  • Вне сайта
  • Эксперт
  • Crazy!!!
  • Постов: 97
  • Репутация: 5
Надо думать в этом направлении.
<html>
	<head>
	<title>Документ без названия</title>
	<script type="text/javascript" src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/linkedselect.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
<script language="JavaScript"> 
<!-- 
function l_image (a) 
{ 
document.images [0] .src=a 
} 
--> 
</script>  
<table cols="2" width="90%" border="0">
<tr><td>
    <p><select id="List1" onClick="changeimage()">
    <option value="white">White</option>
    <option value="black">Black</option>
    </select></p>
    <p><select id="List2"></select></p>
    <p><select id="List3"></select></p></td>
<td align="center" valign="center"><div id="imagech"><img src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg" name="tool" ></div></td>
</tr>
</table>

<script type="text/javascript">
	var list1 = document.getElementById('List1');
	var list2 = document.getElementById('List2').value;
	var list3 = document.getElementById('List3').value;

function changeimage()
{
	if (document.getElementById('List1').value == 'white')
	{
		document.getElementById("imagech").innerHTML = '<img src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg" name="tool" >';
	}
	else if (document.getElementById('List1').value == 'black')
	{
		document.getElementById("imagech").innerHTML = '<img src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/black/000.jpg" name="tool" >';
	}
}
var syncList1 = new syncList
syncList1.dataList = { 

    'white':{
        'white_1':'обычная',
        'white_2':'приталинная'
    },    
    'black':{
        'black_1':'обычная ч',
        'black_2':'приталинная ч'
    },    
    'white_1':{
        'white_1_1':'обычная с 2 пуговицами',
        'white_1_2':'обычная с 3 пуговицами'
    },
    'white_2':{
        'white_2_1':'приталинная с 2 пуговицами',
        'white_2_2':'приталинная с 3 пуговицами'
    },
    'black_1':{
        'black_1_1':'обычная ч с 2 пуговицами',
        'black_1_2':'обычная ч с 3 пуговицами'
    },
    'black_2':{
        'black_2_1':'приталинная с 2 пуговицами',
        'black_2_2':'приталинная с 3 пуговицами'
    }
};

syncList1.sync("List1","List2","List3");
</script>


</body>
</html>
Лёх, ты че сделал??? Ч-чини давай!!!
  • Страница:
  • 1
Время создания страницы: 0.65 секунд