使用javascript更新下拉菜单

Updating a drop down menu using javascript

本文关键字：下拉菜单 更新 javascript 使用      更新时间：2023-09-26

我想在另一个菜单中的选择之后填充一个下拉菜单。当奥迪被选中时，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>

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

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

首先，你在获取select boxes元素时做错了。但无论如何…你的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");
    }             
}

也给你的"make"选择框添加一个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>

试试这样做。你现在如何在html中调用它有点不稳定。如果将更改事件绑定到侦听器，您将更容易看到结果。jsfiddle

html看起来是一样的，除了第二个下拉菜单也有一个id:

<html>
<head>
<title>Welcome to the homepage</title>
</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 id="make_id" name="make_id" 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>

javascript现在看起来像这样:

var form1 = document.getElementById('make_id');
form1.addEventListener('change', update_model);
var audi_List = [
    'A1',
    'A3', ]
var bmw_list = [
    '1 SERIES',
    '3 SERIES',
    '5 SERIES',
    '6 SERIES',
    '7 SERIES',
    'X1',
    'X3',
    'X5',
    'Z3',
    'Z4', ]
function update_model(e) {
    var value = e.target.value;
    var theForm = document.getElementById('model_id');
    theForm.innerHTML = '';
    theForm.options[0] = new Option('*Choose Model*', '');
    switch (value) {
        case 'audi':
            for (i = 0; i < audi_List.length; i++) {
                theForm.options[i+1] = new Option(audi_List[i], audi_List[i]);
            }
            break;
        case 'bmw':
            for (i = 1; i < bmw_list.length; i++) {
                theForm.options[i] = new Option(bmw_list[i], bmw_list[i]);
            }
            break;
        case 'ford':
            for (i = 1; i < ford_list.length; i++) {
                theForm.options[i] = new Option(bmw_list[i], bmw_list[i]);
            }
            break;
        case 'toyota':
            for (i = 1; i < toyota_list.length; i++) {
                theForm.options[i] = new Option(bmw_list[i], bmw_list[i]);
            }
            break;
    }
}

我把所有的值放在一个数组中，因为生活中没有足够的时间来输入那么多单独的Option类。您还可以列出任何其他内容，将它们放入数组中，并使用相同的函数通过一些更改来更新其他下拉列表。只要指定你的ford_list和toyota_list就可以了。

相关文章：