получение некого value и вывод его в определенный блок div
Суть вопроса такова есть 4 select-а (зависимые списки), вот они:
<script type="text/javascript">
/*
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();
};
var rezult = $("#List4").val();
$('#itog').val(rezult);
</script>
</head>
<body>
<div>
<form>
<label>Страна</label><br />
<select id="List1">
<!-- Первый (главный) список (изначально заполнен вручную) -->
<option value="ax0"> Выберите страну </option>
<option value="ax1">Абхазия</option>
<option value="ax185">Россия</option>
</select>
<!-- Подчиненный список 1 (изначально пуст) -->
<select size="1" id="List2" name="a2"></select>
<!-- Подчиненный список 2 (изначально пуст) -->
<select size="1" id="List3" name="a3"></select>
<!-- Подчиненный список 2 (изначально пуст) -->
<select size="1" id="List4" name="a3"></select>
</div>
<div id="itog"></div>
<div>
<script type="text/javascript" src="js/many.js"></script>
а вот скрипт к нему из файла many.js
// Создаем новый объект связанных списков
var syncList1 = new syncList;
// Определяем значения подчиненных списков (2 и 3 селектов)
syncList1.dataList = {
/* Определяем элементы второго списка в зависимости
от выбранного значения в первом списке */
//////////////////////////////////
/// Варианты 2-го уровня списка///
//////////////////////////////////
//////////////////////////////////
///Выбор года для Абхазия/////////
//////////////////////////////////
'ax1':{'ax1_2017':'2017', 'ax1_2016':'2016'},
'ax185':{'ax185_2017':'2017', 'ax185_2016':'2016', 'ax185_2015':'2015'},
//////////////////////////////////
/// Варианты 3-го уровня списка///
//////////////////////////////////
'ax2_2017':{'ax2-0':'Выберите из списка', 'ax2-1':'Московский монетный двор (ММД)', 'ax2-2':'Санкт-Петербургский монетный двор (СПМД)'},
'ax185_2017':{'ax185-0':'Выберите из списка', 'ax185-1':'Московский монетный двор (ММД)', 'ax185-2':'Санкт-Петербургский монетный двор (СПМД)'},
'ax1-1':{'ax1ax0':'Выберите из списка', 'ax1ax1':'3 рубля Монастырь Сурб-Хач, Республика Крым', 'ax1ax2':'25 рублей Дворцово-парковый ансамбль "Нескучное", г. Москва'},
'ax185-1':{'ax185ax0':'Выберите из списка', 'ax185ax1':'3 рубля Монастырь Сурб-Хач, Республика Крым', 'ax185ax2':'25 рублей Дворцово-парковый ансамбль "Нескучное", г. Москва', 'ax185ax3':'2 рубля Географ П.П. Семёнов-Тян-Шанский, к 190-летию со дня рождения', 'ax185ax4':'10 рублей регулярной чеканки', 'ax185ax5':'5 рублей регулярной чеканки', 'ax185ax6':'2 рубля регулярной чеканки', 'ax185ax7':'1 рубль регулярной чеканки'},
'ax1-2':{'ax1ax0':'Выберите из списка', },
'ax185-2':{'ax185ax0':'Выберите из списка', }
};
// Включаем синхронизацию связанных списков
syncList1.sync("List1","List2","List3","List4");
// тут еще все норм работает а вот дальше почему-то ни ошибки нету и не выводится вопрос что ни так делаю
var rezult = $("#List4").val();
$('#itog').val(rezult);
$(document).ready(function(){
$('#List4').on('click', function() {
if(rezult == 'ax185ax1') {
$('#itog').html('<table id="t"><tbody><caption>3 рубля Монастырь Сурб-Хач, Республика Крым</caption><tr class="x1"><th class="a1">Год</hd><th class="a2">Страна</hd><th class="a3">Номинал</hd><th class="a4">Наименование</hd><th class="a5">Дата</hd><th class="a1">Год</th></tr><tr class="z1"><td class="a1">2017</td><td class="a2-1">Россия</td><td class="a3-1">3 рубля</td><td class="a4-1" id="zoom">Монастырь Сурб-Хач, Республика Крым<span><h4>Монастырь Сурб-Хач, Республика Крым</h4><img id="foto" src="images/99.png" alt="Аверс"><img id="foto" height="235px" width="235px" src="images/100.png" alt="Реверс"><table id="t1"><tr id="x2"><td>Номинал</td><td>3 рубля</td></tr><tr id="x2"><td>Качество</td><td>пруф</td></tr><tr id="x2"><td>Металл, проба</td><td>серебро 925/1000</td></tr><tr id="x2"><td>Масса общая, г</td><td>33,94 (±0,31)</td></tr><tr id="x2"><td>Содержание химически чистого металла не менее, г</td><td>31,10</td></tr><tr id="x2"><td>Диаметр, мм</td><td>39,00 (±0,30)</td></tr><tr id="x2"><td>Толщина, мм</td><td>3,30 (±0,35)</td></tr><tr id="x2"><td>Оформление гурта:</td><td>300 рифлений</td></tr><tr id="x2"><td>Тираж, шт.</td><td>5000 шт</td></tr><tr id="x2"><td>Дата выпуска:</td><td>01.03.2017</td></tr><tr id="x2"><td>Чеканка:</td><td>Московский монетный двор (ММД)</td></tr><tr id="x2"><td>Каталожный номер:</td><td>5111-0357</td></tr></table></span></td><td class="a5-1">01.03.2017</td><td class="a1">2017</td></tr></tbody></table>');
}
});
});
так вот вопрос что нетак и как сделать так чтоб при смене выбора контент не просто добавлялся а старый выбор убирался а новый появлялся |
Цитата:
|
низнаю это скрипт взятый с интернета и он работает нормально а вот после строки
syncList1.sync("List1","List2","List3","List4");
уже мои дороботки я пытаюсь через List4 вывести некий код HTML в #itog |
Цитата:
|
я же написал скрипт взят из интернета
|
Цитата:
Связанные списки - выбор в любом из них очищает списки следующие ниже по уровню и обновление следующего за текущим списком. Выбор последнего, это цель. Таймер в контексте списков используют для задержки между запросами сервера, к чему он в приведенном нужен, где данные для списков готовым объектом представлены... |
а что это?
'ax1':{'ax1_2017':'2017', 'ax1_2016':'2016'},
'ax185':{'ax185_2017':'2017', 'ax185_2016':'2016'},
'ax1_2017':{'ax2-0':'Выберите из списка', 'ax1-1':'Московский монетный двор (ММД)', 'ax1-2':'Санкт-Петербургский монетный двор (СПМД)'},
'ax185_2017':{'ax185-0':'Выберите из списка', 'ax185-1':'Московский монетный двор (ММД)', 'ax185-2':'Санкт-Петербургский монетный двор (СПМД)'},
'ax1-1':{'ax1ax0':'Выберите из списка', 'ax1ax1':'3 рубля Монастырь Сурб-Хач, Республика Крым', 'ax1ax2':'25 рублей Дворцово-парковый ансамбль "Нескучное", г. Москва', 'ax1ax3':'2 рубля Географ П.П. Семёнов-Тян-Шанский, к 190-летию со дня рождения', 'ax1ax4':'10 рублей регулярной чеканки', 'ax1ax5':'5 рублей регулярной чеканки', 'ax1ax6':'2 рубля регулярной чеканки', 'ax1ax7':'1 рубль регулярной чеканки'},
'ax1-2':{'ax1ax0':'Выберите из списка', },
'ax185-1':{'ax185ax0':'Выберите из списка', 'ax185ax1':'3 рубля Монастырь Сурб-Хач, Республика Крым', 'ax185ax2':'25 рублей Дворцово-парковый ансамбль "Нескучное", г. Москва', 'ax185ax3':'2 рубля Географ П.П. Семёнов-Тян-Шанский, к 190-летию со дня рождения', 'ax185ax4':'10 рублей регулярной чеканки', 'ax185ax5':'5 рублей регулярной чеканки', 'ax185ax6':'2 рубля регулярной чеканки', 'ax185ax7':'1 рубль регулярной чеканки'},
'ax185-2':{'ax185ax0':'Выберите из списка', }
|
так вот я и спрашиваю почему у меня не получается вывести эти данные при клике на List4 и ошибку не показывает
|
Цитата:
|
угу вот выбор 4-го списка должен привести к выводу определенного контента который относится к данному пункту списка а он не выводится вот я и спросил что я сделал нетак
|
Вы тренируетесь или же это то, что реально нужно - четыре списка и этот набор данных?
|
учусь а на пальцах тяжело учится
|
чем больше закавык всяких и сложнее и если сам своими ручками переберешь это тем лучше учится поэтому так много списков а то что в списках так это знакомый попросил для телефона сделать страничку )) вот и получается и сам учусь и что-то полезное делаю
|
Ваши списки в форме, то есть выбор в последнем списке не предполагает вообще никаких действий - все что выбрано в списках будет отправлено формой серверу. А заполняется последний список данными по выбору не в нем, а в предыдущем списке.
|
это понятно что последний выбор заполняется в 3-ем списке, но я то делаю последний выбор в 4-ом списке, а соответственно в 4-й список попадает некое значение правильно? так как я его вижу в 4-ом списке вот я и пытаюсь получить значение value 4-го списка и в зависимости от него вывести некий контент в id="itog"
|
в результате получаем переменную с неким value
var rezult = $("#List4").val();
|
далее обращаемся к списку List4 и по нажатию на некий вариант в списке (в зависимости какой вариант, а подразумевается что в 4-ом списке могут находится сотни значений )
$(document).ready(function(){
$('#List4').on('click', function() {
|
и исходя из выше изложенного остается занести при клике все это дело в id="itog"
|
$(document).ready(function(){
$('#List4').on('click', function() {
if(rezult == 'ax185ax1') {
$('#itog').html();
}
});
});
|
в результате браузерная консоль показывает что ошибок нету и некого контента нету
вот и суть вопроса что ни так делаю? |
Цитата:
Другими словами - достаточно одного обработчика события onchange набора списков, чтобы построить все списки. А "последний выбор в 4-ом списке, а соответственно в 4-й список попадает некое значение правильно" к построению списков отношения не имеет. Если для всех списков единый обработчик, значит в нем должна быть проверка текущего списка, и если это последний, значит это конечная цель - нужно его значение, получайте. |
тобишь вот таким образом я не получу значение List4 ,?
var rezult = $("#List4").val();
|
Почему, получим, если и в рамках JQ.
Вы не понимаете самой сути связанных списков, а если точнее - зависимых списков. Код, что вы на шли на просторах интернета, даже с натяжкой назвать зависимыми списками нельзя. Это ахинея полная, жалкая пародия, имитация связей. Самый яркий пример зависимых списков, это адресация. Конечной целью в таких списках например может быть получение улиц в конкретной стране, конкретном регионе и его городе. Выбор каждого списка, это запрос в базу - сначала по идентификатору страны выбираются ее регионы, следующий запрос это уже запрос по идентификатору страны и идентификатору региона, и получают список городов, и т.д. Если же сделать запрос "получить все данные стран", то это будет древовидное описание данных, то есть это иерархия, зависимость данных. А то что у вас в "найденном в интернете", то в них связь может быть только от богатой фантазии. Хотя для удобства обращения к данным, которые загодя отдаются клиенту, их можно представить и не в виде дерева, но в этом случае "зависимость" данных возлагается на сценарий. Хотите понять как работает это, как должно работать, значит на простом примере постройте зависимые данные, а затем построение по ним связанных списков. Может тогда поймете, что в таком наборе есть конечная цель, последний выбор. |
я суть понял теперь объясню почему именно этот скрипт а не PHP. так как эта страничка должна открываться на телефоне а телефон PHP не понимает тобишь должно быть все скажем так переносимо и рабоче везде а не только на сервере
|
если бы найти тоже самое но на чисто JQ в смысле без PHP и ajax то было бы вооще шикарно
|
Цитата:
Цитата:
Не важно, на стольной ли системе, в мобильной ли открывается страница, эта страница есть HTML, а активные сценарии в ней, это Javascript. Серверного в таких страницах нет и в помине. jQuery это и есть Javascript, фреймворк написанный на Javascript. При этом страница в браузере мобильной системы может обмениваться данными с сервером, это ничем не запрещается. Вот какая странность в вашем рассуждении - "но я то делаю последний выбор в 4-ом списке, а соответственно в 4-й список попадает некое значение правильно?". Что значит попадает? Последний список на момент выбора в нем заполнен, и выбор в нем, это просто выбор опции, а ее значение и будет являться значением списка ($("#List4").val()).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var data = {
'a' : {
'1' : {'1': 'Var 2-1-1', '2': 'Var 2-1-2'},
'2' : {'1': 'Var 2-2-1', '2': 'Var 2-2-2'}
},
'b' : {
'1' : {'1': 'Var 3-1-1', '2': 'Var 3-1-2'},
'2' : {'1': 'Var 3-2-1', '2': 'Var 3-2-2'}
}
};
$(function() {
//заполнение списков и выбор в последнем списке
//при этом назвать списки зависимыми можно только номинально:
//1) данные не связаны
//2) стоит убрать disabled у списков и можно будет заполнять списки произвольно
//то есть, это "имитация" связанных списков
//на самом деле сценарий просто задает последовательность заполнения списка от первого до...
var lst = $('#list').on('change', 'select', function() {
if(this.value) {
if(this.name != 'c') {
var i = lst.index(this)+1, //индекс следующего списка от текущего
src = lst.eq(i); //следующий список
//очищаем все последюущие списки от текущего и запрещаем выбор в них
lst.slice(i).empty().prop('disabled', 1)
//получаем данные для следующего списка, строим его и разрешаем в нем выбор
src.append('<option value="">Select...</option>').prop('disabled', 0)
$.each(data[this.name][this.value], function(k, v) {
src.append('<option value="'+k+'">'+v+'</option>')
})
} else alert(this.value) //иначе выбор в последнем списке - цель
}
}).find('select');
});
</script>
</head>
<body>
<form id="list" autocomplete="off">
<select name="a">
<option value="">Select...</option>
<option value="1">Var 1-1</option>
<option value="2">Var 1-2</option>
</select>
<select name="b" disabled>
</select>
<select name="c" disabled>
</select>
</form>
</body>
</html>
|
практически тоже самое за исключением того что в scripte изменение любой позиции ведет за собой дальнейшие изменения а в JQ нет только первый ведет к изменениям, а так то я согласен по поводу связанных списков но вся беда в том что перерыв интернет исчерпывающие сведения по какому либо вопросу найти очень проблематично , а если еще учесть что разные плюшки называются по разному и объяснения этому как таковой нету то пока до кого либо дойдет почему то или иное выражение именно так называется пройдет куча времени. Извини если много глупых вопросов задаю так как практически все что можно найти объясняется следующим образом (образно):
возьмите А прибавьте или отнемите Б и вы получите С а вот С вы можете вставить или вывести куда либо . Примерно все!!!)))) А сути то не раскрыто почему именно А почему именно Б и какие варианты вообще есть все каментарии разчитаны на продвинутого пользователя и некто не задумывается что у нас в инете уйма одаренных людей которым нужно разживать и в рот положить по другому недаходит а некоторые просто стесняются спросить чо да как. |
практически тоже самое за исключением того что в scripte изменение любой позиции ведет за собой дальнейшие изменения а в JQ нет только первый ведет к изменениям, а так то я согласен по поводу связанных списков но вся беда в том что перерыв интернет исчерпывающие сведения по какому либо вопросу найти очень проблематично , а если еще учесть что разные плюшки называются по разному и объяснения этому как таковой нету то пока до кого либо дойдет почему то или иное выражение именно так называется пройдет куча времени. Извини если много глупых вопросов задаю так как практически все что можно найти объясняется следующим образом (образно):
возьмите "А" прибавьте или отнимите "Б" и вы получите С а вот С вы можете вставить или вывести куда либо . Примерно все!!!)))) А сути то не раскрыто почему именно А почему именно Б и какие варианты вообще есть все, комментарии рассчитаны на продвинутого пользователя и некто не задумывается что у нас в интернете уйма одаренных людей которым нужно разжевать и в рот положить по другому ни доходит а некоторые просто стесняются спросить чо да как. |
Цитата:
Не нужно никаких таймеров для данной задачи, а то что это никак не связанные списки я уже устал повторять, и в комментарии к коду еще раз отмечено почему. Разжевывать мне просто некогда, нет на это времени, придется самому вникать в код и учиться понимать... |
я понял спасибо большое и на этом
|
| Часовой пояс GMT +3, время: 01:11. |