VPF::Двухуровневое меню с выпадающим списком

FuckIR

Дата 4.12.2009, 13:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 4.12.2009

Репутация: нет
Всего: нет

Здравствуйте, скинте пожалуста ссылку на готовый скрипт или может гдето это уже обсуждалось. В общем суть: Два горизонтальных список/меню, линк осуществляется кнопкой после выбора что то типа этого: http://webholl.com/skripty/javascripts/vyp...0080723694.html
Но не устраивает зависимость второго списка от первого - это будут сравнительные характеристики 2-ух моделей, поэтому надо чтоб списки были не зависимыми и переход кнопкой только после выбора в первом и втором списке меню. Заранее спасибо

webaliser

Дата 4.12.2009, 15:45 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 30
Регистрация: 15.12.2007

Репутация: нет
Всего: нет

Я дам пример, а ты посмотришь сам.

Файл linkedselect.html

Код


<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>
  
<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>

Файл linkedselect.js

Код


/*
wwww.tigir.com (дата последней модификации - 30.11.2007)
Библиотека linkedselect.js из статьи "Javascript SELECT - динамические списки" - http://www.tigir.com/linked_select.htm

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

FuckIR

Дата 4.12.2009, 16:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 4.12.2009

Репутация: нет
Всего: нет

webaliser, Это совсем не то, мне не надо зависимости, в двух частях меню выбора будут одинаковые списки и кнопка перехода исходя из комбинации списков. Все так же как в предыдущем посте приведенном мною примере - только без зависимости.

Добавлено через 6 минут и 42 секунды
Вот пример того что яхочу http://www.versiya.com/rus/production/compare.shtml

Котокобра

Дата 4.12.2009, 16:37 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 147
Регистрация: 26.11.2009

Репутация: нет
Всего: 4

FuckIR,
но это же очень просто, практически только верстка.

Код


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body>

<form id="frm" onSubmit="return false">

<select name="first_list">
    <option value="0">Выберети пункт</option>
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
</select>

&nbsp;&nbsp;

<select name="second_list">
    <option value="0">Выберети пункт</option>
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
</select>

&nbsp;&nbsp;

<input type="submit" value="run function" onClick="process(this.parentNode.first_list.value, this.parentNode.second_list.value)" />

<script language="JavaScript" type="text/javascript">
function process(p1, p2){
    alert(p1 + "\n" + p2);
}
</script>

</form>

</body>

FuckIR

Дата 4.12.2009, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 4.12.2009

Репутация: нет
Всего: нет

Котокобра, огромное спасибо - да я вижу что все не так и сложно, но сам бы не додумался

Котокобра

Дата 4.12.2009, 17:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 147
Регистрация: 26.11.2009

Репутация: нет
Всего: 4

FuckIR,
пожалуйста

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »