Взаимосвязь select'ов

[karakym]

Доброго времени суток, помогите реализовать следующую функцию:
Есть 2 select
у первого к примеру 5 значений для выбора
второй изначально скрыт и пуст
Как только выберем из первого какое то значение, должен отобразится второй и в него должны загрузиться данные (например из массива) которые предназначены именно для выбранной опции.
По Русски это звучит так:
Выбираем допустим в первом select'е третье значение по имени "автобусы" и второй сразу становится видим и в него загружаются все "автобусы", если в первом выберем легковые, то во второй загрузятся "легковухи" и т.д.

[Опан]

Есть пример для трёх селектов:

Страна: <select id="country_id" class="StyleSelectBox">
    <option value="0">- выберите страну -</option>
    <option value="1">Россия</option>
    <option value="2">Украина</option>
    <option value="3">Белорусь</option>
</select>
<br>Регион: 
<select id="region_id" disabled>
    <option value="0">- Выберите регион -</option>
</select></td><td>
<br>Город: 
<select id="city_id" disabled>
    <option value="0">- Выберите город -</option>
</select>

<script>
var all_regions=[];
var all_cites=[[],[],[]];
 
all_regions[0]=["московская обл","ростовская обл","саратовская обл"];
all_regions[1]=["киевская обл","львовская обл","харьковская обл"];
all_regions[2]=["минская обл","брестская обл","гроднинская обл"];
 
all_cites[0][0]=["Москва","Химки","Калуга"];
all_cites[0][1]=["Такой-то город","Такой-то город","Калуга"];
all_cites[0][2]=["Такой-то город","Такой-то город","Такой-то город"];
 
all_cites[1][0]=["Киев","Жмеринка","Бердычев"];
all_cites[1][1]=["Львов","Сокаль","Стрый"];
all_cites[1][2]=["Харьков","Полтава","Пирятин"];
 
all_cites[2][0]=["Минск","Такой-то город","Такой-то город"];
all_cites[2][1]=["Брест","Такой-то город","Такой-то город"];
all_cites[2][2]=["Гродно","Такой-то город","Вильно"];
 
country_id.onchange=function(){
    region_id.disabled=false;
    region_id.innerHTML="<option value='0'>- Выберите регион -</option>";
    myregion=this.value-1;
    if(myregion!=-1){
        for(var i=0;i<all_regions[myregion].length;i++){
            region_id.innerHTML+='<option value="'+(i+1)+'">'+all_regions[myregion][i]+'</option>';
        }
    }else{
        region_id.disabled=true;
        city_id.disabled=true;
    }
}
 
region_id.onchange=function(){
    city_id.disabled=false;
    city_id.innerHTML="<option value='0'>- Выберите город -</option>";
    var mycite=this.value-1;
    if(mycite!=-1){
        for(var i=0;i<all_cites[myregion][mycite].length;i++){
            city_id.innerHTML+='<option value="'+(i+1)+'">'+all_cites[myregion][mycite][i]+'</option>';
        }
    }else{
        city_id.disabled=true;
    }
}
</script>

[september-x]

Опан,
Подскажите, пожалуйста, как изменить код чтобы в value вместо цифер указывать "Россия / Украина / Белорусь"?

[j0hnik]

september-x,
в value города в html что у вас?

[september-x]

В программировании я еще туп, пока пытался просто переделать готовый вариант с выводом значения из селектов (в данном случае у меня выдает число вместо материала), да только тут в числовом value вся суть и условие задано для чисел..

<tr>
<td><select id="kzas_Har" class="StyleSelectBox">
    <option value="0">---</option>
    <option value="Кирпичи">Кирпичи</option>
    <option value="Бутылки">Бутылки</option></select></td>
<td><div id="wb_Text7"><span>Материал</span></div></td>
</tr>


<tr>
<td><select id="kzas_KolZd" ><option value="">---</option></select></td>
<td><div id="wb_Text7"><span>Количество</span></div></td></tr>
<tr>
<td><select id="kzas_PlotZas" ><option value="">---</option></select></td>
<td><div id="wb_Text7"><span>Плотность</span></div></td></tr>

<script>
var all_regions=[];
var all_cites=[[],[]];
 
all_regions[0]=[2,5,9];
all_regions[1]=["1-2","4-6"];
 
all_cites[0][0]=[10,20,30,50];
all_cites[0][1]=[10,20,30,40];
 

kzas_Har.onchange=function(){
    kzas_KolZd.disabled=false;
    kzas_KolZd.innerHTML="<option value='0'>---</option>";
    myregion=this.value-1;
    if(myregion!=-1){
        for(var i=0;i<all_regions[myregion].length;i++){
            kzas_KolZd.innerHTML+='<option value="'+(i+1)+'">'+all_regions[myregion][i]+'</option>';
        }
    }else{
        kzas_KolZd.disabled=true;
        kzas_PlotZas.disabled=true;
    }
}
 
kzas_KolZd.onchange=function(){
    kzas_PlotZas.disabled=false;
    kzas_PlotZas.innerHTML="<option value='0'>---</option>";
    var mycite=this.value-1;
    if(mycite!=-1){
        for(var i=0;i<all_cites[myregion][mycite].length;i++){
            kzas_PlotZas.innerHTML+='<option value="'+(i+1)+'">'+all_cites[myregion][mycite][i]+'</option>';
        }
    }else{
        kzas_PlotZas.disabled=true;
    }
}
</script>

[j0hnik]

опишите подробно что должно происходить.

[september-x]

У меня есть первый селект, задающий условие (Кирпичи или Бутылки)
В зависимости от его условия у двух других меняются значения. С последующим выводом результата (переменная или .. ) для дальнейшего использования в формулах
*блокировка не интересует

К примеру:
Если первый селект "Кирпичи"
Второй селект id="kzas_KolZd" - значения [2,5,9];
Третий селект id="kzas_KolZd" - значения ["1-2","4-6"]
Если первый селект "Бутылки"
Второй селект id="kzas_PlotZas" - значения [10,20,30,50];
Третий селект id="kzas_PlotZas" - значения [10,20,30,40]

У меня есть идея задать value (при выводе результата у меня выводится имя value):
<option value="Кирпичи">Кирпичи</option>
<option value="Бутылки">Бутылки</option>
и в условии просто прописать если "Кирпичи", то 2 или 5 или 9 и т.д. (но я пока не знаю как задать условие для массива (сделать выбор между ними).. для одного условия я справлюсь)..

[j0hnik]

id одинаковые не должны быть

[j0hnik]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<select id="first">
		<option>-------</option>
		<option>Кирпичи</option>
		<option>Бутылки</option>
	</select>
	<div id="sel"></div>

	<script>

		first.onchange = function(){
			if(this.selectedIndex == 0) sel.innerHTML = '';
			if(this.selectedIndex == 1) //Кирпичи
			sel.innerHTML = '\
			<select>\
			<option>2</option>\
			<option>5</option>\
			<option>9</option>\
			</select><br>\
			<select>\
			<option>1-2</option>\
			<option>4-6</option>\
			</select>';
			else if(this.selectedIndex == 2)  //бутылки
			sel.innerHTML = '\
			<select>\
			<option>10</option>\
			<option>20</option>\
			<option>30</option>\
			<option>50</option>\
			</select><br>\
			<select>\
			<option>10</option>\
			<option>20</option>\
			<option>30</option>\
			<option>40</option>\
			</select>';
		};
	</script>

</body>
</html>

если нужны value можете добавить, id тоже, обработчик вешайте внутри или делегируйте

[september-x]

Большое спасибо за помощь!! По превью все работает, буду изучать почему у меня ругается на "`"..