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

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/