Я пытаюсь создать простой js-скрипт, который динамически заполняет 2 выпадающих меню, но я не понимаю, что я делаю не так с моим скриптом: (
<head>
<script>
var carModels = {
Audi : ["A3", "A4" ],
Alfa-Romeo : ["Giullietta", "Giullia" ]
}
function makeSubmenu(value) {
if (value.length == 0){
document.getElementById("modelId").innerHTML = "<option></option>";
} else {
var modelOptions = "";
for (modelCar in carModels[value]) {
modelOptions += "<option>" + carModels[value][modelCar]
+ "</option>";
}
document.getElementById("modelId").innerHTML = modelOptions;
}
}
function resetSelection() {
document.getElementById("marcaId").selectedIndex = 0;
document.getElementById("modelId").selectedIndex = 0;
}
</script>
</head>
<body onload="resetSelection()">
<div align="center">
<form th:action="@{/search}" method="POST">
<select id="marcaId" size="1" name="marca" required onchange="makeSubmenu(this.value)">
<option></option>
<option>Audi</option>
<option>Alfa-Romeo</option>
</select>
<select id="modelId" size="1" name="model" required >
<option></option>
</select>
<input type="submit" value="Search">
</form>
</body>
Я получаю эти 2 ошибки:
Uncaught ReferenceError: resetSelection is not defined
at onload ((index):6)
Uncaught ReferenceError: makeSubmenu is not defined
at HTMLSelectElement.onchange ((index):13)
onchange @ (index):13
Я не понимаю, почему написано, что эти методы не определены