Динамические списки

Статус
Закрыто для дальнейших ответов.
I

itwork

New Member
Регистрация
22.07.2009
Сообщения
6
Всем привет,
Есть 2 функции для работы с динамическими списками

Код: 
 function dynamicSelect(id1, id2) {
	 if (document.getElementById && document.getElementsByTagName) {
		 var sel1 = document.getElementById(id1);
		 var sel2 = document.getElementById(id2);
 
		 var clone = sel2.cloneNode(true);
		 var clonedOptions = clone.getElementsByTagName("option");
 
		 refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		 sel1.onchange = function() {
			 refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		 }
	 }
 }
 
 
 
 function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	 while (sel2.options.length) {
		 sel2.remove(0);
	 }
	 var pattern1 = /( |^)(select)( |$)/;
	 var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
 
	 for (var i = 0; i < clonedOptions.length; i++) {
		 if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			 sel2.appendChild(clonedOptions[i].cloneNode(true));
		 }
	 }
 }
и вот так присходит вызов для формирования динам. списков, при window.onload
Код: 
 dynamicSelect("Select1", "Select2");
 dynamicSelect("Select2", "Select3");

Но ето не то-что мне надо, и вообщем рещил немного переделать одну из них

Код: 
 function dynamicSelect() { //id1, id2
	 var din_spiski = new Array();
	 din_spiski[0] = new Array();
	 din_spiski[0]["1"] = "Select1";
	 din_spiski[0]["2"] = "Select2";
	 din_spiski[1] = new Array();
	 din_spiski[1]["1"] = "Select2";
	 din_spiski[1]["2"] = "Select3";
 
	 for (var i = 0; i < din_spiski.length; i++) {
 
		 id1 = din_spiski[i]["1"];
		 id2 = din_spiski[i]["2"];
 
		 if (document.getElementById && document.getElementsByTagName) {
			 var sel1 = document.getElementById(id1);
			 var sel2 = document.getElementById(id2);
 
			 var clone = sel2.cloneNode(true);
			 var clonedOptions = clone.getElementsByTagName("option");
	 
			 refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
			 sel1.onchange = function() {
				 refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
			 }
		 }
	 }
 }
все это для того чтобы можно было выздать при window.onload вот так
Код: 
 dynamicSelect()
Вся проблемма в том, что мой вариант почему то не срабатывает, и не понимаю почему!?
Подскажите плиз!
 
Ivan

Ivan

суперМодератор
Регистрация
10.01.2007
Сообщения
316
js не самый удобо читаемый язык.
подкинь исходник страницы с html - будет разговор.
 
I

itwork

New Member
Регистрация
22.07.2009
Сообщения
6
Rico сказал(а):
js не самый удобо читаемый язык.
подкинь исходник страницы с html - будет разговор.
Нажмите, чтобы раскрыть...
ДА КОНЕШНО!


Это изначальный и работающий вариант:
Код: 
 <html>
 <head>
 <script type="text/javascript">
 function dynamicSelect(id1, id2) {
	  if (document.getElementById && document.getElementsByTagName) {
		  var sel1 = document.getElementById(id1);
		  var sel2 = document.getElementById(id2);
 
		  var clone = sel2.cloneNode(true);
		  var clonedOptions = clone.getElementsByTagName("option");
 
		  refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		  sel1.onchange = function() {
			  refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		  }
	  }
 }
 //------------------------------------------------------------
 function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	  while (sel2.options.length) {
		  sel2.remove(0);
	  }
	  var pattern1 = /( |^)(select)( |$)/;
	  var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
 
	  for (var i = 0; i < clonedOptions.length; i++) {
		  if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			  sel2.appendChild(clonedOptions[i].cloneNode(true));
		  }
	  }
 }
 </script>
 <script type="text/javascript">
 
	 window.onload = function() {	
		 dynamicSelect("select-1", "select-2");	
		 dynamicSelect("select-2", "select-3");			
	 }
 
 </script>
 </head>
 <body>
				 <select id="select-1" style="width:180px">
					 <option value="select">Выберите 1. раздел ...</option>
					 <option value="a">A</option>
					 <option value="b">B</option>
					 <option value="c">C</option>
					 
 
				 </select>
 <br/>
				 <select id="select-2"  style="width:180px">
					 <option class="select" value="select">Выберите 2. раздел ...</option>
					 <option class="a" value="aa">A-A</option>
					 <option class="a" value="ab">A-B</option>
					 <option class="a" value="ac">A-C</option>
 
					 <option class="b" value="ba">B-A</option>
						 <option class="b" value="bb">B-B</option>
					 <option class="b" value="bc">B-C</option>
					 
						 <option class="c" value="ca">C-A</option>
					 <option class="c" value="cb">C-B</option>
					 <option class="c" value="cc">C-C</option>
				   </select>
 <br/>
				 <select id="select-3" style="width:180px">
					 <option class="select" value="select">Выберите 3. раздел ...</option>
					 <option class="aa" value="aaa">A-A-A</option>
					 <option class="aa" value="aab">A-A-B</option>
					 <option class="ab" value="aba">A-B-A</option>
					 <option class="ab" value="abb">A-B-B</option>
					 <option class="ac" value="aca">A-C-A</option>
					 <option class="ac" value="acb">A-C-B</option>
					 
					 <option class="ba" value="baa">B-A-A</option>
					 <option class="ba" value="bab">B-A-B</option>
					 <option class="bb" value="bba">B-B-A</option>
					 <option class="bb" value="bbb">B-B-B</option>
					 <option class="bc" value="bca">B-C-A</option>
					 <option class="bc" value="bcb">B-C-B</option>
					 
					 <option class="ca" value="caa">C-A-A</option>
					 <option class="ca" value="cab">C-A-B</option>
					 <option class="cb" value="cba">C-B-A</option>
					 <option class="cb" value="cbb">C-B-B</option>
					 <option class="cc" value="cca">C-C-A</option>
					 <option class="cc" value="ccb">C-C-B</option>
				 </select>
 
 </body>
 </html>

ЭТО тоот вариант который не работает:
Код: 
 <html>
 <head>
 <script type="text/javascript">
 function dynamicSelect() {
	  var din_spiski = new Array();
	  din_spiski[0] = new Array();
	  din_spiski[0]["1"] = "select-1";
	  din_spiski[0]["2"] = "select-2";
	  din_spiski[1] = new Array();
	  din_spiski[1]["1"] = "select-2";
	  din_spiski[1]["2"] = "select-3";
 
	  for (var i = 0; i < din_spiski.length; i++) {
 
		  var id1 = din_spiski[i]["1"];
		  var id2 = din_spiski[i]["2"];
 
		  if (document.getElementById && document.getElementsByTagName) {
			  var sel1 = document.getElementById(id1);
			  var sel2 = document.getElementById(id2);
 
			  var clone = sel2.cloneNode(true);
			  var clonedOptions = clone.getElementsByTagName("option");
	 
			  refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
			  sel1.onchange = function() {
				  refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
			  }
		  }
	  }
 }
 //------------------------------------------------------------
 function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	  while (sel2.options.length) {
		  sel2.remove(0);
	  }
	  var pattern1 = /( |^)(select)( |$)/;
	  var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
 
	  for (var i = 0; i < clonedOptions.length; i++) {
		  if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			  sel2.appendChild(clonedOptions[i].cloneNode(true));
		  }
	  }
 }
 </script>
 <script type="text/javascript">
 
	 window.onload = function() {	
		 dynamicSelect();			
	 }
 
 </script>
 </head>
 <body>
				 <select id="select-1" style="width:180px">
					 <option value="select">Âûáåðèòå 1. ðàçäåë ...</option>
					 <option value="a">A</option>
					 <option value="b">B</option>
					 <option value="c">C</option>
					 
 
				 </select>
 <br/>
				 <select id="select-2"  style="width:180px">
					 <option class="select" value="select">Âûáåðèòå 2. ðàçäåë ...</option>
					 <option class="a" value="aa">A-A</option>
					 <option class="a" value="ab">A-B</option>
					 <option class="a" value="ac">A-C</option>
 
					 <option class="b" value="ba">B-A</option>
						 <option class="b" value="bb">B-B</option>
					 <option class="b" value="bc">B-C</option>
					 
						 <option class="c" value="ca">C-A</option>
					 <option class="c" value="cb">C-B</option>
					 <option class="c" value="cc">C-C</option>
				   </select>
 <br/>
				 <select id="select-3" style="width:180px">
					 <option class="select" value="select">Âûáåðèòå 3. ðàçäåë ...</option>
					 <option class="aa" value="aaa">A-A-A</option>
					 <option class="aa" value="aab">A-A-B</option>
					 <option class="ab" value="aba">A-B-A</option>
					 <option class="ab" value="abb">A-B-B</option>
					 <option class="ac" value="aca">A-C-A</option>
					 <option class="ac" value="acb">A-C-B</option>
					 
					 <option class="ba" value="baa">B-A-A</option>
					 <option class="ba" value="bab">B-A-B</option>
					 <option class="bb" value="bba">B-B-A</option>
					 <option class="bb" value="bbb">B-B-B</option>
					 <option class="bc" value="bca">B-C-A</option>
					 <option class="bc" value="bcb">B-C-B</option>
					 
					 <option class="ca" value="caa">C-A-A</option>
					 <option class="ca" value="cab">C-A-B</option>
					 <option class="cb" value="cba">C-B-A</option>
					 <option class="cb" value="cbb">C-B-B</option>
					 <option class="cc" value="cca">C-C-A</option>
					 <option class="cc" value="ccb">C-C-B</option>
				 </select>
 
 </body>
 </html>
 
T

trueW3C

Поклонник Yii
Регистрация
04.03.2009
Сообщения
847
Код: 
function addLoadEvent(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
				window.onload = func;
		}
		else {
				window.onload = function() {
						oldonload();
						func();
				}
		}
}
func = dynamicSelect();

addEvent(window,'load',func,false);
Код: 
<script type="text/javascript">

	 window.onload = function() {	
		 dynamicSelect("select-1", "select-2");	
		 dynamicSelect("select-2", "select-3");			
	 }

</script>
Поставь в конце HTML
 
I

itwork

New Member
Регистрация
22.07.2009
Сообщения
6
сори нe понимаю для чего этот кусок и куда его вcтавлять:
Код: 
function addLoadEvent(func) {
		   var oldonload = window.onload;
		   if (typeof window.onload != 'function') {
				   window.onload = func;
		   }
		   else {
				   window.onload = function() {
						   oldonload();
						   func();
				   }
		   }
   }
   func = dynamicSelect();
   
   addEvent(window,'load',func,false);
и для чего этот старый код, от которого я в начале пытался избавиться:

Код: 
<script type="text/javascript">
   
		window.onload = function() {	
			dynamicSelect("select-1", "select-2");	
			dynamicSelect("select-2", "select-3");			
		}
   
   </script>
 
I

itwork

New Member
Регистрация
22.07.2009
Сообщения
6
itwork сказал(а):
сори нe понимаю для чего этот кусок и куда его вcтавлять:
Код: 
function addLoadEvent(func) {
		   var oldonload = window.onload;
		   if (typeof window.onload != 'function') {
				   window.onload = func;
		   }
		   else {
				   window.onload = function() {
						   oldonload();
						   func();
				   }
		   }
   }
   func = dynamicSelect();
   
   addEvent(window,'load',func,false);
и для чего этот старый код, от которого я в начале пытался избавиться:

Код: 
<script type="text/javascript">
   
		window.onload = function() {	
			dynamicSelect("select-1", "select-2");	
			dynamicSelect("select-2", "select-3");			
		}
   
   </script>
Нажмите, чтобы раскрыть...
плизз, помогите, не понимаю!
 
Fliand

Fliand

Well-Known Member
Регистрация
16.09.2007
Сообщения
81
Ошибка думаю в этом.
По твоей идеи цикл должен пробегать по масиву и назначать обработчик событий onchange элементу sell. Но каждый раз разный. Тоесть первый раз передавая один аргументы в функцию refreshDynamicSelectOptions, а второй раз другие. Но js так не делает. Он назначает обработчик событий в цикле, для твоего элемента, а то что находится внутри обработчика(это внутри обработчика - refreshDynamicSelectOptions(sel1, sel2, clonedOptions);) он не рассматривает, до того, пока цикл не закончится. Получается у тя все так работает, цикл идет, два раза, в результате его выполнения два раза назначается обработчик событий на элемент sell. Но когда ты из документа вызываешь событие onchange, то js сюда refreshDynamicSelectOptions(sel1, sel2, clonedOptions); сует последние значение переменных sel1, sel2, clonedOptions, а именно эти "select-2" "select-3", а для правильно работы нужны не они, а сначало "select-1" "select-2". В первом же рабочем коде. У тя два раза вызывается функия. И для каждого элемента назначается свой обработчик. Но без цикла. Потому все работет.

Я тоже с этим сталкивался. Но пока не решил проблему времени небыло спросить. Тогда отсюда вопрос по этому коду. Как назначить одному или нескольким элементу через цикл разные обработчики событий и возможно ли это, может кто знает?.
Если непонял спрашивай еше.

Вот простой пример для того, чтобы понять эту проблему.

Код: 
<html>
<head>
<script type="text/javascript">

onload = function() {
	var list = document.getElementsByTagName("A");
	
	for(var i=0; i<list.length; i++) {
		var elem = list.item(i);
		
		elem.onclick = function() {
			alert(i);
		}
	}
}

</script>
</head>
<body>
<a href="#">Link-01</a> | <a href="#">Link-02</a>
</body>
</html>
Поидее должно при нажатии на первой ссылке появляться 1, а на второй 2, но нет.
 
I

itwork

New Member
Регистрация
22.07.2009
Сообщения
6
Смотрел свой скрипт через отладчик, да проблема действительно в этом, вот как решить так и не понятно, люди, нид йор хелп!
 
Fliand

Fliand

Well-Known Member
Регистрация
16.09.2007
Сообщения
81
Походу так правильно работает.

Код: 
<html>
<head>
<script type="text/javascript">

onload = function() {
	var list = document.getElementsByTagName("A");
	
	for(var i=0; i<list.length; i++) {
		var elem = list.item(i);
		
		assign(elem, i);
	}
}

function assign(elem, i) {
	elem.onclick = function() {
		alert(i);
	}
}

</script>
</head>
<body>
<a href="#">Link-01</a> | <a href="#">Link-02</a> | <a href="#">Link-03</a> | <a href="#">Link-04</a>
</body>
</html>
 
Fliand

Fliand

Well-Known Member
Регистрация
16.09.2007
Сообщения
81
Вот этот код вроде нормально работает, но у меня почему-то в ie 8, Возникают проблемы(Иногда второе или третье поле незаполяется, а остается пустым).

Код: 
<html>
<head>
<script type="text/javascript">
function dynamicSelect() {
	//alert("yes");
	  var din_spiski = new Array();
	  din_spiski[0] = new Array();
	  din_spiski[0]["1"] = "select-1";
	  din_spiski[0]["2"] = "select-2";
	  din_spiski[1] = new Array();
	  din_spiski[1]["1"] = "select-2";
	  din_spiski[1]["2"] = "select-3";
	//alert(din_spiski.length);
	  for (var i = 0; i < din_spiski.length; i++) {
		  var id1 = din_spiski[i]["1"];
		  var id2 = din_spiski[i]["2"];

		  if (document.getElementById && document.getElementsByTagName) {
			  var sel1 = document.getElementById(id1);
			  var sel2 = document.getElementById(id2);
			  
			  var clone = sel2.cloneNode(true);
			  var clonedOptions = clone.getElementsByTagName("option");
			  
			  refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
			  //alert(sel1);
			  assign(sel1, sel2, clonedOptions);
		  }
	  }
}
//------------------------------------------------
function assign(sel1, sel2, clonedOptions) {
	sel1.onchange = function() {
		refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
	}
}
//------------------------------------------------------------
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	   while (sel2.options.length) {
		  sel2.remove(0);
	  }
	  var pattern1 = /( |^)(select)( |$)/;
	  var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");

	  for (var i = 0; i < clonedOptions.length; i++) {
		  if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			  sel2.appendChild(clonedOptions[i].cloneNode(true));
		  }
	  }
}
</script>
<script type="text/javascript">

	 window.onload = function() {	
		 dynamicSelect();			
	 }

</script>
</head>
<body>
				 <select id="select-1" style="width:180px">
					 <option value="select">Выберите 1. раздел ...</option>
					 <option value="a">A</option>
					 <option value="b">B</option>
					 <option value="c">C</option>
					 

				 </select>
<br/>
				 <select id="select-2"  style="width:180px">
					 <option class="select" value="select">Выберите 2. раздел ...</option>
					 <option class="a" value="aa">A-A</option>
					 <option class="a" value="ab">A-B</option>
					 <option class="a" value="ac">A-C</option>

					 <option class="b" value="ba">B-A</option>
						 <option class="b" value="bb">B-B</option>
					 <option class="b" value="bc">B-C</option>
					 
						 <option class="c" value="ca">C-A</option>
					 <option class="c" value="cb">C-B</option>
					 <option class="c" value="cc">C-C</option>
				   </select>
<br/>
				 <select id="select-3" style="width:180px">
					 <option class="select" value="select">Выберите 3. раздел ...</option>
					 <option class="aa" value="aaa">A-A-A</option>
					 <option class="aa" value="aab">A-A-B</option>
					 <option class="ab" value="aba">A-B-A</option>
					 <option class="ab" value="abb">A-B-B</option>
					 <option class="ac" value="aca">A-C-A</option>
					 <option class="ac" value="acb">A-C-B</option>
					 
					 <option class="ba" value="baa">B-A-A</option>
					 <option class="ba" value="bab">B-A-B</option>
					 <option class="bb" value="bba">B-B-A</option>
					 <option class="bb" value="bbb">B-B-B</option>
					 <option class="bc" value="bca">B-C-A</option>
					 <option class="bc" value="bcb">B-C-B</option>
					 
					 <option class="ca" value="caa">C-A-A</option>
					 <option class="ca" value="cab">C-A-B</option>
					 <option class="cb" value="cba">C-B-A</option>
					 <option class="cb" value="cbb">C-B-B</option>
					 <option class="cc" value="cca">C-C-A</option>
					 <option class="cc" value="ccb">C-C-B</option>
				 </select>

</body>
</html>
 
insople

insople

Новичок
Регистрация
20.09.2009
Сообщения
1
у меня к Вам вопрос про динамические массивы. Если у нас заранее не известно сколько байт нужно выделить под массив, то как лучше инициализировать массив:

Первый способ
Код:.....i=0;do mas = int malloc2; masi = random40; i;while;.......Второй способ
Код:.....i=0;mas = int malloc2;do masi = random40; mas=int reallocmas,i2; iwhile;.......Эти два кода равнозначны?
 
Fliand

Fliand

Well-Known Member
Регистрация
16.09.2007
Сообщения
81
ээээ, это не похожо на javascript.
 
Статус
Закрыто для дальнейших ответов.

Онлайн статистика

Пользователи онлайн
1
Гости онлайн
29
Всего посетителей
30
Общее число может включать скрытых пользователей.

Статистика форума

Темы
10 931
Сообщения
64 046
Пользователи
12 692
Новый пользователь
TwxqrpPex

Новые пользователи

Поделиться этой страницей

Верх Низ