如何创建新的下拉菜单取决于上一个下拉菜单中的选择

Question

我正在尝试制作一个jQuery，该jQuery允许根据初始下拉菜单的选择显示新的下拉菜单。 例：

下拉菜单1具有以下选项：汽车，飞机。 如果选择“汽车”，则会出现一个新的下拉列表，其中包含以下选项：宝马，奥迪，特斯拉。

如果选择了飞机，则下一个下拉列表将改为显示：空客，波音。

如果我在第二个下拉菜单中选择“宝马”（“汽车”->“宝马”），则第三个下拉菜单将显示M3，M5等选项（这只是您理解我的问题的示例）。 基本上，我只希望根据上一个选择显示新的下拉菜单。

我自己尝试了以下操作：

HTML:
<form id="test" name="testSearch">
<select class="test1">
  <option value="option">Car</option>
  <option value="country">Airplane</option>
</select>

jQuery:
$('form[name="testSearch"] select').click(function () {
        $('div[name=carForm]').append('<select id="carBrand">'+
        '<option>BMW</option>'+
         '<option>Audi</option>'+
         '<option>Tesla</option>'+

但是，这不是很好，我看到可以创建带有下拉列表的div，然后根据您在上一个下拉列表中所做的选择使其可见。 我认为这是要走的路？

抱歉，没有jsfiddle顺便说一句。 非常感谢您的帮助。

Answer 1

我开始给您写一个模糊的答案，但后来又扩展了很多，以至于我做了一个完整的示例。 我将在下面说明所有内容，并在底部链接一些其他文档。

 var dropdowns = [ { type: "Vehicle", options: ["Car", "Airplane"] }, { parentType: "Vehicle", parentOption: "Car", type: "Make", options: ["Audi", "BMW"] }, { parentType: "Vehicle", parentOption: "Airplane", type: "Type", options: ["737", "747"] }, { parentType: "Make", parentOption: "Audi", type: "Model", options: ["A4", "A8L"] }, { parentType: "Make", parentOption: "BMW", type: "Model", options: ["M3", "M5"] }, { parentType: "Make", type: "Color", options: ["White", "Black", "Red"] } ]; function refreshDropdowns(parentType, selection, $container) { var $newContainer = $("<div class='container' />"); if ($container) $container.append($newContainer); else $("body").append($newContainer); dropdowns .filter(i => i.parentType === parentType && (i.parentOption === selection || !i.parentOption)) .map(i => { var $newDropdown = $("<select />").data("type", i.type); var $options = i.options.map(option => $("<option>").val(option).text(option)); var $placeholderOption = $("<option>").text(`Select ${i.type}...`); $newDropdown .append($placeholderOption) .append($options); return $newDropdown; }) .forEach($i => { if ($container) $newContainer.append($i) else { var $rootContainer = $("<div class='container' />"); $rootContainer.appendTo($newContainer).append($i); } }); } $(document).on("change", "select", function() { var $container = $(this).closest(".container"); var type = $(this).data("type"); var selection = $(this).val(); $container.find(".container").remove(); refreshDropdowns(type, selection, $container); }); refreshDropdowns(); 

 select { display: block; width: 150px; padding: 8px 4px; margin: 5px 0; border-radius: 5px; } .root-container { padding: 10px; margin: 10px; border: 1px solid #ccc; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

---

1.为下拉菜单创建结构/列表

在我的示例中，每个对象都有一个type ，一个可选的parentType （假定没有parentType的任何内容始终可见）和一个可选的特定parentOption 。 例如，带有M3和M5的Model下拉列表要求为Make选择“ BMW”。 如果您查看对象，这应该更有意义。

这是非常有益的，因为现在您可以从此处控制所有内容，而不是每次要更新时都深入研究代码。

var dropdowns = [
  {
    type: "Vehicle",
    options: ["Car", "Airplane"]
  },
  {
    parentType: "Vehicle",
    parentOption: "Car",
    type: "Make",
    options: ["Audi", "BMW"]
  },
  {
    parentType: "Vehicle",
    parentOption: "Airplane",
    type: "Type",
    options: ["737", "747"]
  },
  {
    parentType: "Make",
    parentOption: "Audi",
    type: "Model",
    options: ["A4", "A8L"]
  },
  {
    parentType: "Make",
    parentOption: "BMW",
    type: "Model",
    options: ["M3", "M5"]
  },
  {
    parentType: "Make",
    type: "Color",
    options: ["White", "Black", "Red"]
  }
];

2.使用该结构来确定选择更改时要添加/删除的下拉菜单

function refreshDropdowns(parentType, selection, $container) {
  //All our new dropdowns should go in a container together.
  //This makes it easier to remove all children later on.
  var $newContainer = $("<div class='container' />");
  if ($container)
    $container.append($newContainer);
  else
    $("body").append($newContainer);

  //From our dropdown list, find any that depend on this dropdown and/or option
  dropdowns
    .filter(i => i.parentType === parentType && (i.parentOption === selection || !i.parentOption))

    //Now that we know which dropdowns we need to create, let's create the actual
    //<select> and <option> elements
    .map(i => {
      var $newDropdown = $("<select />").data("type", i.type);
      var $options = i.options.map(option => $("<option>").val(option).text(option));
      var $placeholderOption = $("<option>").text(`Select ${i.type}...`);
      $newDropdown
        .append($placeholderOption)
        .append($options);
      return $newDropdown;
    })

    //Add them all to the container. For root-level dropdowns, we'll need separate containers.
    .forEach($i => {
      if ($container) $newContainer.append($i)
      else {
        var $rootContainer = $("<div class='container' />");
        $rootContainer.appendTo($newContainer).append($i);
      }
    });
}

3.下拉菜单更改时调用我们的函数

//We use event delegation here to trigger events for dynamic elements
$(document).on("change", "select", function() {
  var $container = $(this).closest(".container");
  var type = $(this).data("type");
  var selection = $(this).val();

  //Remove any dropdowns that depend on this one
  $container.find(".container").remove();
  refreshDropdowns(type, selection, $container);
});

4.在页面加载一次调用我们的函数只是为了创建root / parentless下拉列表

refreshDropdowns();

---

.filter()

.map()