使用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更新下拉菜單

回答