Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.04.2015, 17:51
Новичок на форуме
Отправить личное сообщение для voron1990 Посмотреть профиль Найти все сообщения от voron1990
 
Регистрация: 15.09.2014
Сообщений: 5

JavaScript - Option, результаты из выпадающего меню. Результаты с большим количеством
Ребят помогите пожалуйста. Пытаюсь разобраться, но видимо без помощи знатоков не обойтись.
Идея такова - при выборе 3го списка и после нажатия отправить, должен появляться результат, в котором будет много текста. Не пойму как для каждой опции селектора выводить свои значения.

Заранее признателен за помощь.


<html>
  <head>
  <title></title>
  <!-- Подключаем javascript-библиотеку функций -->
  <script type="text/javascript" src="linkedselect.js"></script>
    <!--  конец подключений -->
</head>
 
<body>
<form action="?"  method="post">
 
<!-- Первый (главный) список (изначально заполнен вручную) -->
  <select size="1"  id="List1">
    <option selected value="vib">Выбирете бренд</option>   <!-- пустой блок -->
    <option value="mobil"> Mobil </option>
  </select>
<!-- Подчиненный список 1 (изначально пуст) -->
  <select size="1" id="List2"></select>
  
<!-- Подчиненный список 2 (изначально пуст) -->
  <select size="1" id="List3"></select>
<script type="text/javascript">
 
 
// Создаем новый объект связанных списков
var syncList1 = new syncList;
 
// Определяем значения подчиненных списков (2 и 3 селектов)
syncList1.dataList = {
 
/* Определяем элементы второго списка в зависимости 
от выбранного значения в первом списке */
 
'vib':{
      'vib_2':'Выбирете тип масла',
  },
 
  'mobil':{
      'vib_2':'Выбирете тип масла',   // Создаем пустой блок
      'mobil_leg_trans':'Моторные масла легковые автомобили',
      'mobil_com_trans':'Моторные масла коммерческий транспорт',
      'mobil_trans':'Трансмиссионные масла',
      'mobil_hydraulic':'Гидравлические масла',
      'mobil_gas':'Масла для газовых двигателей',
      'mobil_reductor':'Редукторные масла',
  },
 
  
/* Определяем элементы третьего списка в зависимости 
от выбранного значения во втором списке */
 
 
'mobil_leg_trans':{
      'vib_3':'Выбирете название масла',
      'mobil_leg_trans_Mobil_1_0W-20':'Mobil 1 0W-20',
      'mobil_leg_trans_Mobil_1_0W-40':'Mobil 1 0W-40',
      'mobil_leg_trans_Mobil_1_5W-50':'Mobil 1 5W-50',
      'mobil_leg_trans_Mobil_1_10W-60':'Mobil 1 10W-60',
      'mobil_leg_trans_Mobil_1_x1_5W-30':'Mobil 1 x1 5W-30',
      'mobil_leg_trans_Mobil_1_ESP_0W-40':'Mobil 1 ESP 0W-40',
      'mobil_leg_trans_Mobil_1_ESP_Formula_5W-30':'Mobil 1 ESP Formula 5W-30',
      'mobil_leg_trans_Mobil_1_Fuel_Economy_0W-30':'Mobil 1 Fuel Economy 0W-30',
  },
 
 
 
'vib_2':{
      'vib_3':'Выбирете название масла',
  },
 
 
};
 
// Включаем синхронизацию связанных списков
syncList1.sync("List1","List2","List3");
</script>
<input type='submit' value='Отправить'> <!-- подключаем кнопку отправки -->
</form>
</body>
</html>





/*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();
};
Ответить с цитированием
  #2 (permalink)  
Старый 28.04.2015, 08:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,776

Сообщение от voron1990
при выборе 3го списка и после нажатия отправить, должен появляться результат, в котором будет много текста. Не пойму как для каждой опции селектора выводить свои значения
Так у тебя проблема с "много текстом"? Или таки с зависимыми селектами?
Ответить с цитированием
  #3 (permalink)  
Старый 28.04.2015, 12:07
Новичок на форуме
Отправить личное сообщение для voron1990 Посмотреть профиль Найти все сообщения от voron1990
 
Регистрация: 15.09.2014
Сообщений: 5

Селекторы уже зависимы, проблема с выводом текста при выборе(
Ответить с цитированием
  #4 (permalink)  
Старый 30.04.2015, 09:04
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,776

Сообщение от voron1990
проблема с выводом текста при выборе
А какие тогда могут быть проблемы?
Обработать событие onchange последнего селекта... Запросить "много текста"... Вставить его в нужный элемент на странице.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 19:59
Помогите с анимацией выпадающего меню strengerst Элементы интерфейса 13 31.07.2013 11:27
Переход между элементами выпадающего меню Digan jQuery 3 10.10.2012 20:03
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 18:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 19:34