如何在第一個下拉列表中使用所選值填充第二個下拉列表？

Question

說我有這些填充兩個下拉起伏時，我的jsp負載

<select id="Group" name="group"> -- first drop down 
    <option value="0001">1</option> 
    <option value="0002">2</option> 
</select> 

<select id="subGroup" name="class"> -- second drop down 
    <option value="0001-000">A</option> -- sub group associated with option value 001 
    <option value="0001-010">B</option> 
    <option value="0001-020">C</option> 
    <option value="0001-030">D</option> 
    <option value="0001-040">E/option> 
    <option value="0002-000">F</option> -- sub group associated with option value 002 
    <option value="0002-010">G</option> 
    <option value="0002-020">H</option> 
    <option value="0002-040">I</option> 
    </select> 

現在我需要下滲根據在第一個下拉選擇的價值的第二次下降。我無法使用使用數據庫回調方法的PHP代碼。在我的腳本中我有這樣的東西。

$("#Group").change(function() { 
    var groupVal = $(this).find("option:selected").val(); 
    $('#subGroup option').filter(function({return!$(this).val().indexOf(groupVal)!=-1);}).remove(); 
    }); 

該腳本工作正常，它刪除所有選項，然後選擇一個。但我的問題是，下次我在第一個下拉列表中選擇其他值時，第二個下拉列表變爲空。我甚至有隱藏/顯示所有的工作，但估計他們不會與<select> :(

工作，有沒有辦法通過時，我選擇了第一個下拉一些其他選擇，我可以重新填充第二個下拉？

Answer 1

如果您正在移除元素，那麼您不會收回它們。使用hide()和show()就像您一樣˚F建議：

$("#Group").change(function() { 
    var groupVal = $(this).find("option:selected").val(); 
    $('#subGroup option').hide(); 
    $('#subGroup option[value^='+groupVal+']').show(); 
}); 

換句話說，每次#Group選擇框改變時，隱藏#subGroup所有選項，僅顯示其value屬性與groupVal開始的。

Answer 2

商店當頁面加載時第二個選擇框到數組中的選項，然後在更改時從該數組中填充選擇框 您正在刪除第二批「選項」，以便在下一次您想要的時候不再存在使用它們

Answer 3

爲了做到這一點，您需要在某處存儲所有可用的選項，然後從該數據集重新填充。例如

var availableOptions = { 
    'groupOne': {/* options as {value: '', text: ''} */}, 
    'groupTwo': {/* options as {value: '', text: ''} */} 
    }; 

    $("#Group").change(function() { 
    var groupVal = $(this).find("option:selected").val(); 
    var sub = $('#Subgroup'); 
    $.each(availableOptions[groupVal], function(i, data){ 
     sub.append('<option value="'+data+'">'+data.text+'</option>'); 
    }); 

Answer 4

還有一個相關的選擇框插件通過雷米夏普，我已經受夠了，如果你想嘗試的成功：

http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/