下拉菜單/使用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選擇框導航？

回答

相關問題