22.03.2017, 14:32
|
|
Аспирант
|
|
Регистрация: 11.03.2017
Сообщений: 42
|
|
|
получение некого 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>');
}
});
});
так вот вопрос что нетак и как сделать так чтоб при смене выбора контент не просто добавлялся а старый выбор убирался а новый появлялся
|
|
22.03.2017, 17:12
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Sprutenok000
|
|
если в старшем SELECT-е нет выделенного пункта, выделяем первый
|
Как это понять, если списки связанные и "младшие" списки управляются "старшими"? |
|
22.03.2017, 17:23
|
|
Аспирант
|
|
Регистрация: 11.03.2017
Сообщений: 42
|
|
низнаю это скрипт взятый с интернета и он работает нормально а вот после строки
syncList1.sync("List1","List2","List3","List4");
уже мои дороботки я пытаюсь через List4 вывести некий код HTML в #itog |
|
22.03.2017, 18:34
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Sprutenok000
|
|
он работает нормально
|
Более глупого, чем это, в контексте "связанные списки" еще не видел. |
|
22.03.2017, 19:21
|
|
Аспирант
|
|
Регистрация: 11.03.2017
Сообщений: 42
|
|
|
я же написал скрипт взят из интернета
|
|
22.03.2017, 20:30
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Sprutenok000
|
|
скрипт взят из интернета
|
и что, это же не означает что это шедевр. 
Связанные списки - выбор в любом из них очищает списки следующие ниже по уровню и обновление следующего за текущим списком. Выбор последнего, это цель. Таймер в контексте списков используют для задержки между запросами сервера, к чему он в приведенном нужен, где данные для списков готовым объектом представлены... |
|
22.03.2017, 21:38
|
|
Аспирант
|
|
Регистрация: 11.03.2017
Сообщений: 42
|
|
а что это?
'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':'Выберите из списка', }
|
|
22.03.2017, 21:53
|
|
Аспирант
|
|
Регистрация: 11.03.2017
Сообщений: 42
|
|
|
так вот я и спрашиваю почему у меня не получается вывести эти данные при клике на List4 и ошибку не показывает
|
|
22.03.2017, 21:57
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Sprutenok000
|
|
а что это?
|
данные для списков. |
|
22.03.2017, 22:03
|
|
Аспирант
|
|
Регистрация: 11.03.2017
Сообщений: 42
|
|
|
угу вот выбор 4-го списка должен привести к выводу определенного контента который относится к данному пункту списка а он не выводится вот я и спросил что я сделал нетак
|
|
|
|
