创建多个下拉菜单时，如何在加载时设置选项selected？
当页面完成加载时，第一个下拉列表应选择“Horse”，第二个下拉列表应选择“Cow”，第三个下拉列表应选择“Fox”。

let widgetContainer = d3.select('#dropdowns')
  let animalNames = ["Horse", "Dog", "Cow", "Fox", "Cat", "Pig", "Aardvark", "Baboon", "Elephant"]
  let selectedNames = ["Horse", "Cow", "Fox"]
  let dropdowns = widgetContainer
    .selectAll(".widget-select")
    .data(selectedNames)
    .join("select")
    .attr("id", (d, idx) => `select-${idx}`)
    .attr("class", "animal-select")
    .on("change", (animalName, idx, selectElements) => {
      let selectedValues = selectElements.map((elem) => elem.value);
      // function that sets state for graph and renders
      onAnimalSelect(selectedValues);
    });

  let options = dropdowns
    .selectAll("option")
    .data(animalNames)
    .join("option")
    .property("selected", (opt) => {
      // how to find the parent node to set selected?
    })
    .attr("value", (opt) => opt)
    .text((opt) => opt);

下面是一个JSF示例：https://jsfiddle.net/denisemauldin/x0znphky/3/