Помогите с зависящими select

[RevivaL]

Извините, может не там тему создал.

Взял скрипт "Динамические выпадающие списки" xhtml.ru/2006/02/11/dynamic-select/

Всё работает на 3-ри select, вот только мне нужно на 4-ри select, а на 4-ри не работает, подскажите что править или хоть в какую сторону смотреть, гугл перерыл нечёго не нашел. 4-й select не работает...

<script>
    function dynamicSelect(id1, id2) {

       // Сперва необходимо проверить поддержку W3C DOM в браузере.
        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++) {

           // Если название класса клонированного option эквивалентно "select", либо эквивалентно значению option первого списка.
            if (clonedOptions[i].className.match(pattern1) ||
                clonedOptions[i].className.match(pattern2)) {

               // его нужно клонировать в динамически создаваемый список
                sel2.appendChild(clonedOptions[i].cloneNode(true));
            } 
        }
    }

   // Вызов скрипта при загрузке страницы
    window.onload = function() {
		dynamicSelect("select-1", "select-2");
		dynamicSelect("select-2", "select-3");
		dynamicSelect("select-3", "select-4");
    }
</script>


<form>
<select id="select-1" name="country" type="text" />
<option value="1">Украина</option>
<option value="2">Россия</option>
<option value="3">Америка</option>
</select>

<select id="select-2" name="area" type="text" />

<option class="1" value="22">Хмельницкая.обл</option>
<option class="1" value="23">Черкасская.обл</option>

</select>

<select id="select-3" name="sity" type="text" />
<option class="23" value="1">Черкассы</option>
<option class="23" value="2">Умань</option>
<option class="23" value="3">Смела</option>
</select>

<select id="select-4" name="streets" type="text" />
<option class="1" value="1">ул.Громова</option>
<option class="1" value="2">ул.Невского</option>
<option class="2" value="1">ул.Энгельса</option>
</select>
</form>

[bushstas]

а в начале до выбора в первом селекте остальные видны? если видны то доступны? по логике есть вначале тока один, в нем выбрал второй ниже появляется и так далее, тебе такое же надо??? если да то попробую сам скрипт сделать, мне самому интересно

[RevivaL]

Мог бы, сделал сам а так прошу помощи

[bushstas]

<center>
<div id="container" style="margin-top:200px;">
<select id="select1" style="width:200px;" onchange="arrangeSelects(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> 


<select id="select2"  style="display:none">
<option value="1#1">1_1</option>
<option value="1#2">1_2</option>
<option value="2#1">2_1</option>
<option value="2#2">2_2</option>
<option value="3#1">3_1</option>
<option value="3#2">3_2</option>
</select> 




<select id="select3" style="display:none">
<option value="1#1#1">1_1_1</option>
<option value="1#1#2">1_1_2</option>
<option value="1#2#1">1_2_1</option>
<option value="1#2#2">1_1_2</option>
<option value="2#1#1">2_1_1</option>
<option value="2#1#2">2_1_2</option>
<option value="2#2#1">2_2_1</option>
<option value="2#2#2">2_2_2</option>
<option value="3#1#1">3_1_1</option>
<option value="3#1#2">3_1_2</option>
<option value="3#2#1">3_2_1</option>
<option value="3#2#2">3_2_2</option>
</select> 


<select id="select4"  style="display:none">
<option value="1#1#1#1">1_1_1_1</option>
<option value="1#1#1#2">1_1_1_2</option>
<option value="1#1#2#1">1_1_2_1</option>
<option value="1#1#2#2">1_1_2_2</option>
<option value="1#2#1#1">1_2_1_1</option>
<option value="1#2#1#2">1_2_1_2</option>
<option value="1#2#2#1">1_1_2_1</option>
<option value="1#2#2#2">1_1_2_2</option>
<option value="2#1#1#1">2_1_1_1</option>
<option value="2#1#1#2">2_1_1_2</option>
<option value="2#1#2#1">2_1_2_1</option>
<option value="2#1#2#2">2_1_2_2</option>
<option value="2#2#1#1">2_2_1_1</option>
<option value="2#2#1#2">2_2_1_2</option>
<option value="2#2#2#1">2_2_2_1</option>
<option value="2#2#2#2">2_2_2_2</option>
<option value="3#1#1#1">3_1_1_1</option>
<option value="3#1#1#2">3_1_1_2</option>
<option value="3#1#2#1">3_1_2_1</option>
<option value="3#1#2#2">3_1_2_2</option>
<option value="3#2#1#1">3_2_1_1</option>
<option value="3#2#1#2">3_2_1_2</option>
<option value="3#2#2#1">3_2_2_1</option>
<option value="3#2#2#2">3_2_2_2</option>
</select> 

</div>
<script>

window.onload=function(){
var ind=3 // в первом селекте изначально выбран пункт № ind
con=document.getElementById('container')
sel=new Array()
sel[1]=document.getElementById('select1')
sel[2]=document.getElementById('select2')
sel[3]=document.getElementById('select3')
sel[4]=document.getElementById('select4')
sel[1].options[ind-1].selected=true // выбираем стартовый пункт в первом селекте

arrangeSelects(sel[1])// создаем селекты 2,3,4 исходя из выбранного пункта в первом
}

function arrangeSelects(obj){// сюда передается селект в котором выбрали пункт как объект
var val=obj.options[obj.selectedIndex].value // val - value выбранного пункта
var ar=val.split("#")
var count=ar.length
if(count==4){return false} // если кликнули на четвертый селект ничего не делать


	for (var j=count+1; j<=4; j++){


	if(!document.getElementById('created-select'+j)) // если селекта еще не существует создаем
	{
	var select=document.createElement('select')
	select.id="created-select"+j
	select.style.display="block"
	select.style.width="200px"
	select.style.marginTop="20px"
	select.onchange=function(){arrangeSelects(this)}
	} 
   else 
   {
   var select=document.getElementById('created-select'+j) // если существует убираем из него все пункты
	   select.innerHTML=""
   }


for(var i=0; i<sel[j].options.length; i++){ // далее э-э-э-э-э короче моя логика )))

var v=sel[j].options[i].value
var h=sel[j].options[i].innerHTML

var a=v.split('#')
var c=0

for(var k=0; k<=2; k++){
	if(count>=k+1){
		if(typeof(a[k])!="undefined"){
	
		if(a[k]==ar[k]){c++}
		
		}
	}
}



if(c==count){ 
o=document.createElement('option')
o.value=v
o.innerHTML=h
select.appendChild(o)
}

if(!document.getElementById('created-select'+j)){con.appendChild(select)}
}
}
}

</script>

вот вроде работает
можно легко добавить еще селекты единственная сложность в нумерации value
хотя даже 4 уровня я нигде не видел
думал сначала словами прописать а потом не смог придумать четыря уровня для дерева опций )))))
у тебя я так понимаю страна город область и адрес
))))

а вот если все пункты селектов забить в БД очень даже просто можно их формировать на php без кучи писанины ))))

[RevivaL]

Спасибо, как раз то что искал, только можно сделать чтоб ориентир был не на "value" а на "class" ?

[bushstas]

тогда 
<option value="3#2#2#2">3_2_2_2</option>
заменить на
<option class="3#2#2#2">3_2_2_2</option>

var val=obj.options[obj.selectedIndex].value // заменить на
var val=obj.options[obj.selectedIndex].className

var v=sel[j].options[i].value // заменить на
var v=sel[j].options[i].className

o.value=v // заменить на
o.className=v

[RevivaL]

Спасибо! То что нужно!

[bushstas]

работает?
))) если да то я рад полночи возился )))
мне и самому пригодится

[RevivaL]

Один недочёт, при выборе значение в select1 подставляются определённые для этого значения option в select2 при этом select3 и select4 выводят все значения которые были прописаны в html в разброс и им не важно что в select2 выбор не сделан.

[bushstas]

ну значит я не допонял смысл этих селектов ))))
то есть получается что 3 и 4 вообще не зависят от 1 и 2 ?
или когда выбор будет сделан во 2-м то 3-ий отсортируется
когда в 3-ем то 4-ый

первое или второе? )))