Создание динамической формы на JavaScript
Список 1:
- Раздел1
- Раздел2
Список 2:
- Раздел11
- Раздел12
- Раздел21
- Раздел22
Нужно сделать так, чтобы не нажимая кнопки отправки данных, при выборе Раздел1, во втором списке высвечивались только Раздел11 и Раздел12;
при выборе Раздел2, во втором списке высвечивались только Раздел21 и Раздел22...
Специалисты JavaScript, помогите пожалуйста... Буду очень признателен...
<html>
<head>
<title>Динамическая форма на JavaScript</title>
<script>
function dinform() {
if (document.forms["list"].razd1.options[0].selected) {
document.forms["list"].razd2.options[0].selected = true
document.forms["list"].razd2.options[1].selected = true
}
if (document.forms["list"].razd1.options[1].selected) {
document.forms["list"].razd2.options[2].selected = true
document.forms["list"].razd2.options[3].selected = true
}
}
</script>
</head>
<body>
<form name="list">
<select name="razd1" onChange="dinform()">
<option value=1>Раздел1
<option value=2>Раздел2
</select>
<select name="razd2">
<option value=1>Раздел11
<option value=2>Раздел12
<option value=3>Раздел21
<option value=4>Раздел22
</select>
</form>
</body>
</html>
Но этот скрипт не работает... Во втором списке всё равно отображаются 4 раздела, а не два, как нужно... Объясните, почему...
Вот, написал кое-что:
...skipped
Но этот скрипт не работает... Во втором списке всё равно отображаются 4 раздела, а не два, как нужно... Объясните, почему...
RTFM :)
Например, можно сделать так:
<html>
<head>
<title>Динамическая форма на JavaScript</title>
<script language="JavaScript">
<!-- //
function dinform()
{
var src2;
var i = document.list.razd1.selectedIndex;
if (i == 0) {
src2 = '<select name="razd2">'+
'<option value="1">Раздел11'+
'<option value="2">Раздел12'+
'</select>';
} else { // if (i == 1) {
src2 = '<select name="razd2">'+
'<option value="1">Раздел21'+
'<option value="2">Раздел22'+
'</select>';
}
document.all['list2'].innerHTML = src2;
}
// -->
</script>
</head>
<body onLoad="dinform();">
<form name="list">
<select name="razd1" onChange="dinform();">
<option value="1">Раздел1
<option value="2">Раздел2
</select>
<div id="list2">
</div>
</form>
</body>
</html>