Dropdown select with default value

Question

How do I set the option selected on load when creating multiple dropdowns?

When the page finishes loading, the first dropdown should have 'Horse' selected, the second dropdown should have 'Cow' selected, and the third dropdown should have 'Fox' selected.

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

Here's a JSFiddle: https://jsfiddle.net/denisemauldin/x0znphky/3/

user_5768908 · Answer

Using the second and third parameters combined gives us the DOM element (n[i] in this example), and from that we can go up to its parent using parentNode. Therefore, it can be:

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

Here is your code with that change:

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



  Here are some dropdowns. How do we set the default value on load?

Dropdown select with default value

1 Answers