Question

我想问一个简单的问题，我想做一个选择下拉，当我选择其中一个选项时，另一个选择下拉值的变化......

让我说我选择下拉名为具有以下内容的模型

- Acura
- Aston martin
- Audi

我希望当我选择（让我们说）奥迪时，在选型下拉列表中我发现只有奥迪型号

- A3
- A5
- A4

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

谢谢你们

Answer 1

像Shomz说的那样，

假设下拉列表如下：

    <!-- 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，因为第一个选项是空白的选择模型选项。

Answer 2

AJAX调用仍然是最好的解决方案，但如果您不想使用它们，您可以随时为每个主要选项手动创建数组，在select元素上创建一个onchange事件，该事件将调用所选数组并根据该数组的元素创建另一个下拉列表。希望我没有让它变得复杂，因为它不是。

这是sample如何使用jQuery提取值。

使用JavaScript下拉/选择框导航？

2 个答案: