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

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>

现在我需要根据第一个下拉列表中的选定值过滤第二个下拉列表。 我不能使用使用DB回调方法的PHP代码。 在我的剧本中，我有类似的东西。

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

脚本工作正常，它删除所有选项以外的所有选项。 但我的问题是，下次当我在第一次下拉中选择其他值时，第二次下拉变为空。 我甚至使用了hide / show但猜测他们不会使用<select> :(

当我在第一次下拉中选择其他选项时，有什么方法可以重新填充第二次下拉？

Answer 1

如果要删除元素，则不会将其删除。 你自己建议使用hide()和show() ：

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

换句话说，每次更改#Group框时，都会隐藏#subGroup所有选项，并仅显示其value属性以groupVal开头的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

Remy Sharp还有一个相关的选择框插件，如果您想尝试，我已经取得了成功：

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