Изменить один выбор на основе значения другого с помощью Javascript
Мне нужен один <select> выпадающий, чтобы изменить на основе другого. Вот то, что у меня пока, что не работает.
HTML
<html>
<head>
...
</head>
<body>
<form>
<table>
<tr>
<td>Dropdown Menu 1</td>
<td>Dropdown Menu 2</td>
</tr>
<tr>
<td>
<select id="ddl1" onchange="changeDropdown(this,document.getElementById('ddl2'))">
<option value=""><!---------></option>
<option value="Colors">Colors</option>
<option value="Shapes">Shapes</option>
<option value="Sounds">Sounds</option>
</select>
</td>
<td>
<select id="ddl2">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript
<script>
function changeDropdown(ddl1,ddl2) {
var colors = new Array('Black', 'Brown', 'Blue');
var shapes = new Array('Triangle', 'Square', 'Circle');
var sounds = new Array('Loud', 'Soft');
switch (ddl1.value) {
case 'Colors':
for (i = 0; i < colors.length; i++) {
createOptions(ddl2, colors[i], colors[i]);
}
break;
default:
ddl2.options.length = 0;
break;
}
}
function createOptions(ddl,text,value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.option.add(opt);
}
</script>
Это должно быть в Javascript. Я знаю, что люди обычно советуют jQuery для подобных вещей, но это должен быть Javascript.
Что я делаю неправильно?
Заранее спасибо!
-Энтони
3 ответа
Решение
Это работает:
function createOptions(ddl,text,value) {
var opt = document.createElement('option');
opt.setAttribute("value", value);
opt.innerHTML=text;
ddl.appendChild(opt);
}