javascript - 使用 JavaScript 进行下拉/选择框导航？

Question

我想问一个简单的问题，我想创建一个选择下拉菜单，当我选择其中一个选项时，另一个选择下拉菜单的值会发生变化...

假设我选择了名为模型的下拉菜单，其中包含以下内容

- Acura
- Aston martin
- Audi

我希望当我选择(比方说)奥迪时，在类型选择下拉列表中我只找到奥迪类型

- A3
- A5
- A4

我不想使用 AJAX 调用，我只想使用 javascript 或 jquery 来过滤数据

谢谢大家

Answer 1

正如肖姆兹所说，

假设下拉菜单如下所示:

    <!-- First dropdown. Make of car -->
    <select name='Manufactor' id='make'>
        <option value='null'>Select a Make</option>
        <option value='Audi'>Audi</option>
        <option value='BMW'>BMW</option>
        <option value='Volvo'>Volvo</option>
    </select>

    <br />

    <!-- Second dropdown. Model of car -->
    <select name='Model' id='model'>
    </select>

JavaScript 看起来像这样:

    <script type='text/javascript'>

    var model = ['','audi','bmw','volvo']; //Set makes
    model[1] = ['A3', 'A5', 'A4']; // Set Audi models
    model[2] = ['M3', 'M5', 'M6']; // Set BMW models
    model[3] = ['C30', 'C70'];     // Set Volvo models

    var test = model[1][1];

    function setModel(index) {
        var modelDropdown = document.getElementById('model');
        modelDropdown.options.length = null;
        for(var i = 0; i < model[index].length; i++) {
            modelDropdown.options[i] = new Option(model[index][i]);
        }
    }

    window.onload = function() {
        var makeDropdown = document.getElementById('make');
        makeDropdown.onchange = function() {
            setModel(this.selectedIndex);
        }
    }

    </script>

请注意，模型从索引 1 而不是 0 开始，因为第一个选项是空白的“选择模型”选项。