01.03.2011, 11:12
|
Новичок на форуме
|
|
Регистрация: 01.03.2011
Сообщений: 5
|
|
Выборка из динамической таблицы js
Доброго дня, форумчане. Подскажите, как возможно реализовать выборку для динамической js таблицы? Пишу форму заявки для турфирмы, нужно по параметрам выборки в таблице реализовать подпись, подобно "...Вы выбрали
Направление: ........
Курорт:.................
Объект:.................
??...
скрипт прикладывается.
<!-- Подключаем javascript-библиотеку функций -->
<script type="text/javascript">
/*
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();
};
</script>
<!-- Первый (главный) список (изначально заполнен вручную) -->
<select size="6" id="List1">
<option value="abh"> Абхазия </option>
<option value="kr_kr"> Краснодарский край </option>
<option value="krim"> Крым </option>
<option value="belarus"> Беларусь </option>
<option value="undermos"> Подмосковье </option>
</select>
<!-- Подчиненный список 1 (изначально пуст) -->
<select size="6" id="List2"></select>
<!-- Подчиненный список 2 (изначально пуст) -->
<select size="6" id="List3"></select>
<!-- Подчиненный список 3 (изначально пуст) -->
<select size="6" id="List4"></select>
<!-- Подчиненный список 4 (изначально пуст) -->
<select size="6" id="List5"></select>
<script type="text/javascript">
// Создаем новый объект связанных списков
var syncList1 = new syncList;
// Определяем значения подчиненных списков (2 и 3 и 4 и 5 селектов)
syncList1.dataList = {
/* Определяем элементы второго списка в зависимости
от выбранного значения в первом списке */
'abh':{
'gagra':'Гагра',
'picunda':'Пицунда',
'gudayta':'Гудаута',
'new_afon':'Новый Афон',
'suxum':'Сухум'
},
/* Определяем элементы третьего списка в зависимости
от выбранного значения во втором списке */
'gagra':{
'amra':'"Амра" - санаторий',
'san_marina':'"Сан-Марина" - пансионат',
'solnechnii_do':'"Солнечный" - дом отдыха',
'solnechnii_lp':'"Солнечный" - летний пансионат',
'kavkaz':'"Кавказ" - пансионат',
'alex':'"Alex Beach Hotel 4*" - отель',
'bagripsh':'"Багрипш (Холодная речка)" - пансионат',
'kolxida':'"Колхида" - дом отдыха',
'apsni':'"Апсны-Абазашта" - дом отдыха',
'zakavkaz':'"Закавказье" - дом отдыха',
'energetik':'"Энергетик" - пансионат',
'moscow':'"Москва" - санаторий',
'lazur':'"Лазурный берег" - пансионат',
'aibga':'"Аибга - пансионат"',
'abaata':'"Абаата - отель"',
'serebr_dvor':'"Серебряный двор" - частная гостиница',
'tropikana':'"Тропикана" - гостевой дом',
'nart':'"Нарт" - дом отдыха',
'chegem':'"Чегем" - дом отдыха',
'raida':'"Райда" - гостиница'
/* Определяем элементы четвертого списка в зависимости
от выбранного значения в третьем списке */
'amra':{
'glavnii_amra':'"Главный" корпус',
'amra_korpus_2':'"Корпус №2"'
/* Определяем элементы пятого списка в зависимости
от выбранного значения в четвертом списке */
'glavnii_amra':{
'2_x_mestn_more':'2-х местный 1-но комнатный номер – вид на море',
'2_x_mestn_bok':'2-х местный 1-но комнатный номер – боковой',
'2_x_mestn_semilux':'2-х местный 2-х комнатный номер «Полулюкс»'
},
'amra_korpus_2':{
'2_x_mestn':'2-х местный 1-но комнатный номер'
},
};
// Включаем синхронизацию связанных списков
syncList1.sync("List1","List2","List3","List4","List5");
Последний раз редактировалось Santyaga, 01.03.2011 в 11:16.
|
|
01.03.2011, 15:11
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,217
|
|
Сообщение от Santyaga
|
для динамической js таблицы
|
В js нет таблиц...
|
|
01.03.2011, 15:30
|
Новичок на форуме
|
|
Регистрация: 01.03.2011
Сообщений: 5
|
|
ок, пусть я неверно выразился. есть ли какое то решение, при котором произойдет выборка элементов списка?
|
|
01.03.2011, 15:46
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,217
|
|
Santyaga, обычно данные такого рода хранятся в БД и выбираются оттуда неким серверным скриптом. После чего отображаются на странице...
|
|
01.03.2011, 15:53
|
Новичок на форуме
|
|
Регистрация: 01.03.2011
Сообщений: 5
|
|
Сообщение от ksa
|
Santyaga, обычно данные такого рода хранятся в БД и выбираются оттуда неким серверным скриптом. После чего отображаются на странице...
|
Все данные представляют из себя исключительно форму запроса, которая сформирована в виде html страницы. Списки между собой сообщаются, все отображается в броузерном окне. Данные подсвечиваются, вопрос в том, возможно ли из такого рода списка вытянуть данные и каким образом? Сервер тут совершенно не при чем. Данные размещаются не на нем.
|
|
01.03.2011, 15:58
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,217
|
|
Сообщение от Santyaga
|
возможно ли из такого рода списка вытянуть данные
|
Разумеется!
Сообщение от Santyaga
|
каким образом?
|
Как из обычных селектов...
|
|
01.03.2011, 17:11
|
Новичок на форуме
|
|
Регистрация: 01.03.2011
Сообщений: 5
|
|
спасибо, Кэп.
|
|
01.03.2011, 18:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Santyaga, обьект syncList1.dataList содержит ошибки - отсутствуют запятые и фигурные скобки ...
Возможный вариант решения ниже ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var dataList = {
'abh': {
'gagra': 'Гагра',
'picunda': 'Пицунда',
'gudayta': 'Гудаута',
'new_afon': 'Новый Афон',
'suxum': 'Сухум'
},
'gagra': {
'amra': '"Амра" - санаторий',
'san_marina': '"Сан-Марина" - пансионат',
'solnechnii_do': '"Солнечный" - дом отдыха',
'solnechnii_lp': '"Солнечный" - летний пансионат',
'kavkaz': '"Кавказ" - пансионат',
'alex': '"Alex Beach Hotel 4*" - отель',
'bagripsh': '"Багрипш (Холодная речка)" - пансионат',
'kolxida': '"Колхида" - дом отдыха',
'apsni': '"Апсны-Абазашта" - дом отдыха',
'zakavkaz': '"Закавказье" - дом отдыха',
'energetik': '"Энергетик" - пансионат',
'moscow': '"Москва" - санаторий',
'lazur': '"Лазурный берег" - пансионат',
'aibga': '"Аибга - пансионат"',
'abaata': '"Абаата - отель"',
'serebr_dvor': '"Серебряный двор" - частная гостиница',
'tropikana': '"Тропикана" - гостевой дом',
'nart': '"Нарт" - дом отдыха',
'chegem': '"Чегем" - дом отдыха',
'raida': '"Райда" - гостиница'
},
'amra': {
'glavnii_amra': '"Главный" корпус',
'amra_korpus_2': '"Корпус №2"'
},
'glavnii_amra': {
'2_x_mestn_more': '2-х местный 1-но комнатный номер – вид на море',
'2_x_mestn_bok': '2-х местный 1-но комнатный номер – боковой',
'2_x_mestn_semilux': '2-х местный 2-х комнатный номер «Полулюкс»'
},
'amra_korpus_2': {
'2_x_mestn': '2-х местный 1-но комнатный номер'
}
};
var m_out = ['Направление: ','Курорт: ','Обьект: ','Корпус: ','Номер: '];
var t = [];
function fg(d) {
document.getElementById("out").innerHTML = "";
var a = document.getElementById("List" + d),
c = dataList[a.options[a.selectedIndex].value];
t[d] = a.options[a.selectedIndex].text;
for (var b = 0; b < 5; b++) {
a = document.getElementById("List" + b);
if (b > d) {
a.options.length = 0;
t[b] = "---";
if (c) for (var e in c) a.options[a.options.length] = new Option(c[e], e);
c = false;
if (a.options.length) {
c = dataList[a.options[0].value];
t[b] = a.options[0].text
}
}
document.getElementById("out").innerHTML += m_out[b] + t[b] + "<br />"
}
};
window.onload = function ()
{
var s = ["List0","List1","List2","List3","List4"];
for (var i=0; i < s.length; i++) document.getElementById(s[i]).onchange = function(a){return function(){fg(a)}}(i);
fg(0);
}
</script>
</head>
<body>
<select size="6" id="List0">
<option value="abh" selected="selected"> Абхазия </option>
<option value="kr_kr"> Краснодарский край </option>
<option value="krim"> Крым </option>
<option value="belarus"> Беларусь </option>
<option value="undermos"> Подмосковье </option>
</select>
<select size="6" id="List1"></select>
<select size="6" id="List2"></select>
<select size="6" id="List3"></select>
<select size="6" id="List4"></select>
<p id="out"></p>
</body>
</html>
|
|
02.03.2011, 11:40
|
Новичок на форуме
|
|
Регистрация: 01.03.2011
Сообщений: 5
|
|
Спасибо большое сильно помогли
|
|
|
|