Question

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

Answer 1

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

还要为您的＆＃34; make＆＃34;添加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>

Answer 2

请参阅此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>

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

Answer 3

请尝试这种方式。你现在如何通过html中的调用来实现它有点不稳定。如果将change事件绑定到侦听器，您将更容易看到结果。 jsfiddle

除非第二个下拉列表也有一个id：

，否则html看起来会一样

<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，就可以了。

使用javascript更新下拉菜单

3 个答案: