使用javascript更新下拉菜单

我想在另一个菜单中选择一个下拉菜单。当选择奥迪时，应该调用javascript函数，并为奥迪车型填充第二个下拉菜单，选择正确的选项。我似乎无法得到以下工作，如果有人能帮助它会很好。使用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>

来源

2014-05-10 SteveK

看到这个http://jsfiddle.net/QLYwp/

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>

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引用页面上的元素。

来源

2014-05-10 02:27:01 Dave

首先，你是在做错选择框元素。但不管怎么说...您的JavaScript函数应该是这样的：

function update_model(){ 
    var makeEl=document.getElementById("make_id"); 
    var modelEl=document.getElementById("model_id"); 
    var NumModel = modelEl.options.length; 
    var SelectedMake = ''; 

    while(NumModel > 0) {NumModel--; modelEl.options[NumModel] = null;} 

    SelectedMake = makeEl.options[makeEl.selectedIndex].value; 
    if (SelectedMake == "audi") { 
     modelEl.options[0] = new Option("* Choose Model *", ""); 
     modelEl.options[1] = new Option("A1", "A1"); 
     modelEl.options[2] = new Option("A3", "A3"); 

    } 
    else if (SelectedMake == "bmw") { 
     modelEl.options[0] = new Option("* Choose Model *", ""); 
     modelEl.options[1] = new Option("1 SERIES", "1SERIES"); 
     modelEl.options[2] = new Option("3 SERIES", "3SERIES"); 
     modelEl.options[3] = new Option("5 SERIES", "5SERIES"); 
     modelEl.options[4] = new Option("6 SERIES", "6SERIES"); 
     modelEl.options[5] = new Option("7 SERIES", "7SERIES"); 
     modelEl.options[6] = new Option("X1", "X1"); 
     modelEl.options[7] = new Option("X3", "X3"); 
     modelEl.options[8] = new Option("X5", "X5"); 
     modelEl.options[9] = new Option("Z3", "Z3"); 
     modelEl.options[10] = new Option("Z4", "Z4"); 
    }    
}

还添加了一个ID为您的 “做” 选择框中

<select id="make_id" name="make_id" onchange="update_model();" > 
    <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>

来源

2014-05-10 02:06:20 AVK

感谢您的回复，我已经尝试过您的更改，但它仍然无效第二个下拉菜单中没有显示任何其他可能导致此问题的建议？ – SteveK

@SteveK您是否已将该ID添加到make_id

使用javascript更新下拉菜单

回答