Динамический селект
есть пять селектов, первый статичный, второй четвертый зависят от певого, третий пятый от второго четверого.
При переключении варианта в первом селекте, меняется только четвертый, второй почему то не меняется. подскажите где ошибка <html> <head> <title>Связанные селекты</title> <!-- Подключаем javascript-библиотеку функций --> <script type="text/javascript" src="linkedselect.js"></script> </head> <body> <!-- Первый (главный) список (изначально заполнен вручную) --> <select size="4" id="List1"> <option value="ie"> Internet Explorer </option> <option value="safari"> Safari </option> </select> <!-- Подчиненный список 1 (изначально пуст) --> <select size="4" id="List2"></select> <!-- Подчиненный список 2 (изначально пуст) --> <select size="4" id="List3"></select> <!-- Подчиненный список 3 (изначально пуст) --> <select size="4" id="List4"></select> <!-- Подчиненный список 4 (изначально пуст) --> <select size="4" id="List5"></select> <script type="text/javascript"> // Создаем новый объект связанных списков var syncList1 = new syncList; // Определяем значения подчиненных списков (2 и 3 селектов) syncList1.dataList = { /* Определяем элементы второго списка в зависимости от выбранного значения в первом списке */ 'ie':{ 'ie_win':'Windows', 'ie_mac':'Mac' }, 'safari':{ 'safari_mac':'Mac' }, /* Определяем элементы третьего списка в зависимости от выбранного значения во втором списке */ 'ie_win':{ 'ie_win_5':'версия 5', 'ie_win_6':'версия 6' }, 'ie_mac':{ 'ie_mac_5':'версия 5' }, 'safari_mac':{ 'safari_mac_1':'версия 1', 'safari_mac_2':'версия 2' } }; // Включаем синхронизацию связанных списков syncList1.sync("List1","List2","List3"); syncList1.sync("List1","List4","List5"); </script> </body> </html> linkedselect.js /* wwww.tigir.com (дата последней модификации - 30.11.2007) Библиотека linkedselect.js из статьи "Javascript SELECT - динамические списки" - [url]http://www.tigir.com/linked_select.htm[/url] syncList - "класс" связанных списков */ 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(); }; |
Удалить строку "syncList1.sync("List1","List4","List5");" и запустить скрипт пробовали?
П.С. Как вариант ошибки: (сам тот же пример пользую). У Вас задано 5 селектов, а в списке значений для выбора достаточно только на 3 уровня (селекта). Добавте еще 2 уровня и пробуйте... |
Часовой пояс GMT +3, время: 20:24. |