Частый гость
Покинул форум
Сообщений всего: 147
Дата рег-ции: Май 2011
Помог: 2 раз(а)
|
вот
Спойлер (Отобразить)CODE ( htmlphp):
скопировать код в буфер обмена
<script type="text/javascript" src="./linkedselect.js"></script> </script> <form action="" method="post"> <table border="0" > <tr> <td>Тип 1</td> <td>Тип 2</td> <td>Тип 3</td><td></td></tr> <tr><td> <select name="obj" id="List1" > <option value="1_1">Квартиры и таунхаусы</option> <option value="1_2">Дома</option> </select></td><td> <select disabled="disabled" name="region" id="List2"></select></td><td> <select disabled="disabled" name="price" id="List3"></select></td><td> <input type="hidden" name="op" value="go" /> <input type="submit" value="Поиск" /></td></tr></table> <script type="text/javascript"> var syncList1 = new syncList; syncList1.dataList = { /* Определяем элементы второго списка в зависимости от выбранного значения в первом списке */ '1_1' :{ '2_1_0':'Любой Регион', '2_1_1':'Баошичи', '2_1_2':'Биела' }, '1_2' :{ '2_2_0':'Любой Регион', '2_2_1':'aaa', '2_2_2':'ddd' }, /* Определяем элементы третьего списка в зависимости от выбранного значения во втором списке */ '2_1_0':{'3_01':'Любая','3_1':'До 100 000 евро','3_2':'100 000 - 250 000 евро','3_3':'Свыше 250 000 евро'}, '2_1_1':{'3_3_0':'fdgdf','3_3_01':'ddddddd','3_3_02':'dddddd'}, '2_1_2':{'3_3_0':'bbb','3_3_01':'nnnnn','3_3_02':'kkk'},'2_1_3':{'3_3_0':'Любая цена'}, '2_2_0':{'3_02':'Любая','3_4':'до 300 000 евро','3_5':'300 000 - 500 000 евро','3_6':'более 500 000 евро'}, '2_2_1':{'3_3_0':'Любая цена'},'2_2_2':{'3_3_0':'Любая цена'},'2_2_3':{'3_3_0':'Любая цена'}, }; // Включаем синхронизацию связанных списков syncList1.sync("List1","List2","List3"); </script> </form> </div>
linkedselect.js
Спойлер (Отобразить)CODE ( javascript):
скопировать код в буфер обмена
// JavaScript Document function syncList(){} //Определяем функцию конструктор //Определяем методы //Метод sync() - принимает список из значений атрибутов id элементов SELECT, образующих связанный список и запускает их синхронизацию syncList.prototype.sync = function() { //Перебираем аргументы (id элементов SELECT) и назначаем событиям onChange селектов, с соответствующими id, функцию-обработчик. //В качестве обработчика выступает второй метод объекта syncList - _sync (напрямую его вызывать не нужно) //Обработчик назначается всем элементам SELECT кроме последнего в списке аргументов, т.к. последний не влияет ни на какой другой элемент SELECT и с ним не нужно синхронизироваться. for (var i=0; i < arguments.length-1; i++) document.getElementById(arguments[i]).onchange = (function (o,id1,id2){return function(){o._sync(id1,id2);};})(this, arguments[i], arguments[i+1]); document.getElementById(arguments[0]).onchange();//запускаем обработчик onchange первого селекта, чтобы при загрузке страницы заполнить дочерние селекты значениями. } //служебный метод _sync - срабатывает при смене выбранного элемента в текущем (старшем) элементе SELECT (по его событию onChange) и изменяет содержимое зависимого селекта на основании значения выбранного в старшем селекте. syncList.prototype._sync = function (firstSelectId, secondSelectId) { var firstSelect = document.getElementById(firstSelectId); var secondSelect = document.getElementById(secondSelectId); secondSelect.length = 0; //обнуляем второй (подчиненный) SELECT if (firstSelect.length>0)//если первый (старший) SELECT не пуст { //из свойства dataList, с данными для заполнения подчиненных селектов, берем ту часть данных, которая соответствует именно значению элемента, //выбранного в первом селекте, и определяет содержимое подчиненного элемента SELECT. var optionData = this.dataList[ firstSelect.options[firstSelect.selectedIndex==-1 ? 0 : firstSelect.selectedIndex].value ]; //заполняем второй (подчиненный) селект значениями (создаем элементы option) for (var key in optionData || null) secondSelect.options[secondSelect.length] = new Option(optionData[key], key); //если в старшем SELECT-е нет выделенного пункта, выделяем первый if (firstSelect.selectedIndex == -1) setTimeout( function(){ firstSelect.options[0].selected = true;}, 1 ); //если во втором списке нет выделенного пункта, выделяем первый его пункт if (secondSelect.length>0) setTimeout( function(){ secondSelect.options[0].selected = true;}, 1 ); } //если второй (подчиненный) селект имеет в свою очередь свои подчиненные селекты (те, для которых он главный), //то запускаем его обработчик onchange, чтобы изменить его подчиненные селекты secondSelect.onchange && secondSelect.onchange(); };
(Отредактировано автором: 26 Июня, 2011 - 20:08:37)
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)
Без описания
