Помогите с зависящими select
Извините, может не там тему создал.
Взял скрипт "Динамические выпадающие списки" 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>
|
а в начале до выбора в первом селекте остальные видны? если видны то доступны? по логике есть вначале тока один, в нем выбрал второй ниже появляется и так далее, тебе такое же надо??? если да то попробую сам скрипт сделать, мне самому интересно
|
Мог бы, сделал сам а так прошу помощи
|
<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 без кучи писанины )))) |
Спасибо, как раз то что искал, только можно сделать чтоб ориентир был не на "value" а на "class" ?
|
тогда <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 |
Спасибо! То что нужно!
|
работает?
))) если да то я рад полночи возился ))) мне и самому пригодится |
Один недочёт, при выборе значение в select1 подставляются определённые для этого значения option в select2 при этом select3 и select4 выводят все значения которые были прописаны в html в разброс и им не важно что в select2 выбор не сделан.
|
ну значит я не допонял смысл этих селектов ))))
то есть получается что 3 и 4 вообще не зависят от 1 и 2 ? или когда выбор будет сделан во 2-м то 3-ий отсортируется когда в 3-ем то 4-ый первое или второе? ))) |
| Часовой пояс GMT +3, время: 02:54. |