Nested Input dynamic selection

I am trying to see if there is a way to have the results of the first input, select the first (or last value) of the 2nd input. I see that you can specify a key value - but can that value be dynamic based on the previous input?

In the notebook example - when I select a different presidential term i.e. (2017 to 2021: Donald J. Trump), the year_introduced values change i.e. (2017, 2018, etc…) but none are selected by default

My test notebook is here Nested Input / mferro64 | Observable

Thanks for any help,


I would create the following…

presidentialYearMap =, d => d.year_introduced)

and replace the related code with the following…

viewof year_introduced_2 =, {key: Math.min(...presidentialYearMap.keys()), sort: true, unique: true, label: "Select year introduced"})

Setting the key: Math.min(...presidentialYearMap.keys()) is what selects the 2nd input. The logic will select the earliest year

1 Like

I like to use IIFEs for this:

viewof presidential_term_2 = (options =>, {
  key: "2021-2024: Joseph R. Biden",
  sort: true,
  unique: true,
  label: "Select Presidential Term"
}))(, d => d.President))
viewof year_introduced_2 = (options =>, {
  // Select the last key.
  key: [...options.keys()].at(-1),
  sort: true,
  unique: true,
  label: "Select year introduced"
}))(, d => d.year_introduced))
viewof signed_governor_2 = (options =>, {
  // Find the previously selected key, or default to the first key.
  key: !!(this?.querySelector("input:checked")?.value ?? [...options.keys()].at(0)),
  sort: true,
  unique: true,
  label: "Signed by Governer"
}))(, d => d.action_classification === "executive-signature"))

This will work - appreciate the help!