如何使用第一个下拉列表中的选定值填充第二个下拉列表？答案

【问题标题】：how to populate the second drop down using the selected value in first drop down?如何使用第一个下拉列表中的选定值填充第二个下拉列表？
【发布时间】：2009-12-07 19:01:53
【问题描述】：

假设我有两个在我的 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();
    });

脚本运行良好，它删除了除所选选项之外的所有选项。但我的问题是，下次当我在第一个下拉列表中选择其他值时，第二个下拉列表为空。我什至使用了隐藏/显示，但猜想他们不会使用 <select> :(

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

【问题讨论】：

标签： php jquery

【解决方案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开头的选项。

【讨论】：

非常感谢.. 它有效.. :) 但每当我在第一个下拉菜单中选择另一个选项时，我都可以在框中看到旧值。一旦我点击第二个下拉菜单，它就会消失..如何解决..？？
我猜你用的是IE？除了change之外，你还可以尝试绑定click，但我不会给你任何保证。
我尝试了两种方式绑定，但它在 IE 中不起作用.. 它在 mozilla 中起作用...... :(
那是因为 IE 不允许 CSS 通过 display: none; 隐藏元素；您必须强制删除它们，然后再将它们放回原处。这就是我做出回应的原因。

【解决方案2】：

当页面加载时，将第二个选择框的所有选项存储到一个数组中。然后在更改时从该数组中填充选择框。您正在删除第二“批”选项，以便下次您想使用它们时它们不再存在。

【讨论】：

【解决方案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>');
  });

【讨论】：

实际上这些下拉列表是使用 fuego 标签从数据库中填充的。下拉列表太大（~15k），因此无法将每个子组存储为变量。
但是您已经承受了这些选项的影响，因为您已经将它们写入 html - 这将比压缩的 js/json 符号对象更重要。无论如何，您无法在 ie 中隐藏选项，因此如果您需要 xbrowser 支持，您将不得不删除附加它们。因此，您可以将它们存储在一个简单的对象/数组、一个隐藏的 select/div 元素中，或者您可以在更改第一个选择时使用 ajax 调用来构建它们。

【解决方案4】：

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

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

【讨论】：