Question

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

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

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

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

我自己尝试过这样的事情：

       this.line = d3Shape.line()
       .x( (d: any) => this.x(d.date) )
       .y( (d: any) => this.y(d.average) );

   this.svg.append('path')
  .datum(this.customTitle)
  .attr("fill", "none")
  .attr("stroke-width", 1.5)
  .attr("stroke-linejoin", "round")
  .attr("stroke-linecap", "round")
  .attr("d", this.line(this.customTitle.filter(function(d){
    return d.average<268;
  })))
  .attr("stroke","red");

  this.svg.append('path')
 .attr("fill", "none")
 .attr("stroke-width", 1.5)
 .attr("d", this.line(this.customTitle.filter(function(d){
   return d.average>=268;
 })))
 .attr("stroke", "green");

但这不是很好，我看到可以创建带有下拉列表的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。例如，带有Model和M3的{{1}}下拉列表要求为M5选择“ BMW”。如果您查看对象，这应该更有意义。

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

Make

2。使用该结构来确定选择更改时要添加/删除的下拉列表

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"]
  }
];

3。每当下拉列表更改时调用我们的函数

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);
      }
    });
}

4。只需在页面加载时调用我们的函数即可创建根/无父级下拉列表

//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);
});

.filter()

.map()

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

1 个答案: