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

我想问快速问题，我想做一个选择下拉，当我选择其中一个选项的值选择下拉更改...下拉菜单/使用JavaScript选择框导航？

比方说，我有选择下拉称为模型具有以下

- Acura 
- Aston martin 
- Audi

我想，当我选择（比方说）的奥迪，在类型选择下拉我觉得奥迪类型的唯一

- A3 
- A5 
- A4

我不希望使用AJAX调用，我只想使用JavaScript或jQuery对数据进行筛选

谢谢你们

来源

2011-11-12 osos

这已被问了很多次。请搜索类似的问题。 –

像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，因为第一个选项是空白Select Model选项。

来源

2011-11-12 20:32:10

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

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

来源

2011-11-12 19:53:50 Shomz

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

回答

相关问题