javascript - 下拉选择默认值

Question

如何在创建多个下拉菜单时设置选项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);

这是一个 JSFiddle:https://jsfiddle.net/denisemauldin/x0znphky/3/

Answer 1

结合使用第二个和第三个参数为我们提供了 DOM 元素(在本例中为 n[i])，然后我们可以使用 parentNode。因此，它可以是:

.property("selected", (opt, i, n) => d3.select(n[i].parentNode).datum() === opt)

这里是你的代码有那个变化:

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, i, n) => d3.select(n[i].parentNode).datum() === opt)
  .attr("value", (opt) => opt)
  .text((opt) => opt);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.0/d3.min.js"></script>
<p>
  Here are some dropdowns. How do we set the default value on load?
</p>
<div id="dropdowns">
</div>