[Проблема] Связанные селекты - подскажите, плз

02-07-2009, 02:51 PM

Всем привет!

Подскажите. Допустим, есть связанные селекты - например, 3 штуки (код хтмл ниже). Как сделать, чтобы при выборе какого-либо пункта в 3 окне (выделено жирным ниже), пользователь переходил по ссылке? В общем как вставить ссылку?

Code:

<html>
 <head>
 <title>Связанные селекты</title>
 
 <!-- Подключаем javascript-библиотеку функций (в приложенном файле)-->
 <script type="text/javascript" src="linkedselect.js"></script>
</head>
<body>
<!-- Первый (главный) список (изначально заполнен вручную) -->
 <select size="4" id="List1">
   <option value="ie"> Руководства по ремонту </option>
   <option value="safari"> Сервисная информация </option>
 </select>
 
<!-- Подчиненный список 1 (изначально пуст) -->
 <select size="4" id="List2"></select>
 
<!-- Подчиненный список 2 (изначально пуст) -->
 <select size="4" id="List3"></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");
</script>
</body>
</html>

Код подключаемого js:

Code:

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();
};

Orgazm добавил 07.02.2009 в 14:50
Т.е. доходим до выбора в третьем окошке - выбираем и нас перекидывает по ссылке на сайт

02-07-2009, 11:00 PM

вешай обработчик события на onchange

Code:

onchange="window.location.href=this.options[this.selectedIndex].value;"

02-08-2009, 12:52 AM

Спасибо! тормозил))