我想在另一个菜单中进行选择后填充下拉菜单。当选择奥迪时，onchange 应调用 javascript 函数，并使用奥迪车型的正确选项填充第二个下拉菜单。我似乎无法让以下内容发挥作用，如果有人可以提供帮助，那就太好了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome to the homepage</title>
<script>
function update_model(theForm){
theForm=document.frm2;
var NumModel = theForm.model_id.options.length;
var SelectedMake = '';
while(NumModel > 0) {NumModel--; theForm.model_id.options[NumModel] = null;}
SelectedMake = theForm.make_id.options[theForm.make_id.selectedIndex].value;
if (SelectedMake == "audi") {
theForm.model_id.options[0] = new Option("* Choose Model *", "");
theForm.model_id.options[1] = new Option("A1", "A1");
theForm.model_id.options[2] = new Option("A3", "A3");
} else if (SelectedMake == "bmw") {
theForm.model_id.options[0] = new Option("* Choose Model *", "");
theForm.model_id.options[1] = new Option("1 SERIES", "1SERIES");
theForm.model_id.options[2] = new Option("3 SERIES", "3SERIES");
theForm.model_id.options[3] = new Option("5 SERIES", "5SERIES");
theForm.model_id.options[4] = new Option("6 SERIES", "6SERIES");
theForm.model_id.options[5] = new Option("7 SERIES", "7SERIES");
theForm.model_id.options[6] = new Option("X1", "X1");
theForm.model_id.options[7] = new Option("X3", "X3");
theForm.model_id.options[8] = new Option("X5", "X5");
theForm.model_id.options[9] = new Option("Z3", "Z3");
theForm.model_id.options[10] = new Option("Z4", "Z4");
}
}
</script>
</head>
<body>
<center>
<h2>Welcome to the homepage</h2>
<br><br>
<input type="submit" value="Login" onclick="window.location='Login.jsp'">
<input type="submit" value="Register" onclick="window.location='Registration.jsp'">
<br><br>
<label>
<select name="make_id" onchange="update_model(this.form);" class="dbsearchform1">
<option value=''> *Choose Make*</option>
<option value="audi" >Audi</option>
<option value="bmw" >BMW</option>
<option value="ford" >Ford</option>
<option value="toyota" >Toyota</option>
</select>
<select name="model_id" id="model_id" class="istyle" >
<option value='' >*Choose Model*</option>
</select>
</label>
</center>
</body>
</html>
最佳答案
HTML
<center>
<h2>Welcome to the homepage</h2>
<br><br>
<input type="submit" value="Login" onclick="window.location='Login.jsp'">
<input type="submit" value="Register" onclick="window.location='Registration.jsp'">
<br><br>
<label>
<select name="make_id" id="make_id" onchange="update_model();" class="dbsearchform1">
<option value=''> *Choose Make*</option>
<option value="audi" >Audi</option>
<option value="bmw" >BMW</option>
<option value="ford" >Ford</option>
<option value="toyota" >Toyota</option>
</select>
<select name="model_id" id="model_id" class="istyle" >
<option value='' >*Choose Model*</option>
</select>
</label>
</center>
JS
function update_model(){
var model_id = document.getElementById("model_id");
var make_id = document.getElementById("make_id");
var NumModel = model_id.options.length;
var SelectedMake = '';
while(NumModel > 0) {NumModel--; model_id.options[NumModel] = null;}
SelectedMake = make_id.options[make_id.selectedIndex].value;
if (SelectedMake == "audi") {
model_id.options[0] = new Option("* Choose Model *", "");
model_id.options[1] = new Option("A1", "A1");
model_id.options[2] = new Option("A3", "A3");
} else if (SelectedMake == "bmw") {
model_id.options[0] = new Option("* Choose Model *", "");
model_id.options[1] = new Option("1 SERIES", "1SERIES");
model_id.options[2] = new Option("3 SERIES", "3SERIES");
model_id.options[3] = new Option("5 SERIES", "5SERIES");
model_id.options[4] = new Option("6 SERIES", "6SERIES");
model_id.options[5] = new Option("7 SERIES", "7SERIES");
model_id.options[6] = new Option("X1", "X1");
model_id.options[7] = new Option("X3", "X3");
model_id.options[8] = new Option("X5", "X5");
model_id.options[9] = new Option("Z3", "Z3");
model_id.options[10] = new Option("Z4", "Z4");
}
}
主要问题是您需要使用 document.getElementById 来引用页面上的元素。
关于javascript - 使用 JavaScript 更新下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23576302/