Javascript-форум - SELECT + SELECT + Возврат

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - SELECT + SELECT + Возврат (https://javascript.ru/forum/dom-window/17295-select-select-vozvrat.html)

SELECT + SELECT + Возврат

Привожу свой исходник

Файл: Index.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
<script type="text/javascript" src="syncList.js"></script>
<script type="text/javascript">

function GET_THEM_AND_TEMPLATE(){
GET_LIST();
var DEFUALT_THEME = 'demo2';
var DEFUALT_TEMPLATE = 'contact';
var theme = document.editpage.theme;
for(var i=0; i<theme.options.length; i++){
if (theme.options[i].value == DEFUALT_THEME) theme.options[i].selected=true;
}
var template = document.editpage.template;
for(i=0; i<template.options.length; i++){
if (template.options[i].value == DEFUALT_TEMPLATE) template.options[i].selected=true;
}
}

function GET_LIST(){
var syncList1 = new syncList;
syncList1.dataList = {
'demo':{
'index2':'index',
'contact2':'contact',
},
'demo2':{
'index':'index',
'contact':'contact',
},
};
syncList1.sync("List1","List2");
}
</script>
</head>

<body onload="GET_THEM_AND_TEMPLATE()">
<form name="editpage" method="GET">
<select size="1" name="theme" id="List1" onchange="GET_LIST()">
<option value="demo">Тема: Demo</option>
<option value="demo2">Тема: Demo2</option>
</select>
<select size="1" name="template" id="List2">
</select>
</form>
</body>

</html>

Файл: syncList.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();
};

Во втором списке
if (template.options[i].value == DEFUALT_TEMPLATE) template.options[i].selected=true; - не выполняется. В чем ошибка?

Во-первых, пожалуйста, отформатируйте Ваш код! Разбирать крайне трудно.

Во-вторых, приведите сообщение об ошибке из консоли ошибок Вашего браузера. Согласитесь, между «не работает!» и «выдает ошибку такую-то в строке такой-то» огромная разница.

Я написал не ошибка, а не выполняется. Нету никакого номера ошибки. Хорош умничать, если кто знает в чем причина, то я на этом сайте не напрасно. А если кто то просто себе плюсики набирает, найдите другой пост. Центральный Javascript-ресурс. Вопрос начинался с 2х связанных селектов. Никто не ответил и я нашел сам. Возврат первого выбранного по умолчанию, тоже никто не помог. Хоть с последним помогите.

ЗАДАЧА "Что бы элемент второго списка равный DEFUALT_TEMPLATE был SELECTEDINDEX".

Вам же сказали отформатируйте код, неудобно напрягать зрение для парсинга такого кода)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
<script type="text/javascript" src="syncList.js"></script>
<script type="text/javascript">

Файл syncList.js

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

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

function GET_LIST(){
  var syncList1 = new syncList;
   syncList1.dataList = {
    'demo':{
      'index2':'index',
      'contact2':'contact',
           },
    'demo2':{
      'index':'Demo2:index',
      'contact':'Demo2:contact',
           },
                        };
   syncList1.sync("List1","List2");                     
 }
 
 function GET_THEM_AND_TEMPLATE(){
   
  var DEFUALT_THEME = 'demo2';
   var DEFUALT_TEMPLATE = 'contact';
    var theme = document.editpage.theme;
     for(var i=0; i<theme.options.length; i++){
      if (theme.options[i].value == DEFUALT_THEME) theme.options[i].selected=true;
                                              }
	  GET_LIST();							  
     var template = document.editpage.template; 
      for(i=0; i<template.options.length; i++){
       if (template.options[i].value == DEFUALT_TEMPLATE) template.options[i].selected=true;
                                              }  
 }

</script>   
</head>
<body onload="GET_THEM_AND_TEMPLATE()">
 <form name="editpage" method="GET">
	<select size="1" name="theme" id="List1" onchange="GET_LIST()">
	 <option value="demo">Тема: Demo</option>
	  <option value="demo2">Тема: Demo2</option>
	   </select>
	<select size="1" name="template" id="List2">
	  </select>
</form>
</body>

</html>

Мне нужно, что бы если DEFUALT_TEMPLATE = одному из значений списка 2 (name="template" id="List2"), то
это значение было выделено, как это происходит в списке 1.
По моим наблюдениям это происходит if (theme.options[i].value == DEFUALT_THEME) theme.options[i].selected=true
, но почему то опять выделенным становиться первый элемент 2ого списка.

tuezov52,
Вы злой ленивый хам.

Проблема в этой строке в syncList.js:

if (secondSelect.length>0) setTimeout( function(){ secondSelect.options[0].selected = true; }, 1 );

То есть, Вы устанавливете selectedIndex, а функция, вызванная по таймауту из GET_LIST через 1мс его сбрасывает на 0.

Вы правы. Это не мой исходник. Все что мне нужно, это при выборе из первого списка, вывести значение второго. Как вы думаете
subzey можно ли сделать это короче?