Я пытаюсь создать простой 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
Я не понимаю, почему говорится, что эти методы не определены
Вам нужно заключить свойство Alfa-Romeo
в кавычки, как это ..
var carModels = {
Audi : ["A3", "A4" ],
"Alfa-Romeo" : ["Giullietta", "Giullia" ]
}
Пожалуйста, обратитесь к этот ответ для объяснения причин.
The only reasons to quote object-keys are
- the property name is reserved/used by the browser/js engine (eg. "class" in IE)
- you have special characters or white spaces in your key