第二個下拉框需要動態填充

Question

是否有可能根據第一個下拉框中的值動態填充第二個下拉框。

<select name="category"> 
    <option value="0">None</option> 
    <option value="1" rel="accessories">Cellphones</option> 
    <option value="2" rel="sports">Sports</option> 
    <option value="3" rel="cars">Cars</option> 
</select> 

<select name="items" class="cascade"> 
    <option value="3" class="accessories">Smartphone</option> 
    <option value="8" class="accessories">Charger</option> 
    <option value="1" class="sports">Basketball</option> 
    <option value="4" class="sports">Volleyball</option> 
    <option value="6" class="cars">Corvette</option> 
    <option value="2" class="cars">Monte Carloe</option> 
</select> 

Answer 1

是的，這是可能的。使用jQuery它會是這個樣子：

$('select[name="category"]').on('change',function() { 
    // hide everything 
    $('select[name="items"] option').hide(); 
    // show matching items 
    $('select[name="items"] .'+$(this).find(":selected").attr('rel')).show(); 
    // make the top one selected 
    $('select[name="items"] .'+$(this).find(":selected").attr('rel')).first().attr('selected','selected'); 
}); 

如果你想拉列表的詳細動態，你可以使用上面作爲一個起點，但在Ajax調用的選項填寫，而不是列出所有選項輸出和隱藏/顯示。