# Nested Input dynamic selection

**URL:** <https://talk.observablehq.com/t/nested-input-dynamic-selection/7783>\
**Category:** Help\
**Created:** [March 24, 2023, 7:03pm UTC](https://talk.observablehq.com/t/nested-input-dynamic-selection/7783 "2023-03-24T19:03:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mferro64](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mferro64/32/6421_2.png) [@mferro64](https://talk.observablehq.com/u/mferro64)\
**Post date:** [March 24, 2023, 7:03pm UTC](https://talk.observablehq.com/t/nested-input-dynamic-selection/7783/1 "2023-03-24T19:03:28Z")

</div>

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](https://observablehq.com/d/7e1c1a7958ed5ba8)

Thanks for any help,

Mike

---

<div class="post-metadata">

**Author:** ![ciscorucinski](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ciscorucinski/32/4305_2.png) [@ciscorucinski](https://talk.observablehq.com/u/ciscorucinski)\
**Post date:** [March 25, 2023, 9:09am UTC](https://talk.observablehq.com/t/nested-input-dynamic-selection/7783/2 "2023-03-25T09:09:09Z")

</div>

I would create the following…

```auto
presidentialYearMap = d3.group(presidential_term_2, d => d.year_introduced)

```

and replace the related code with the following…

```auto
viewof year_introduced_2 = Inputs.radio(presidentialYearMap, {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

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 25, 2023, 11:27am UTC](https://talk.observablehq.com/t/nested-input-dynamic-selection/7783/3 "2023-03-25T11:27:13Z")

</div>

I like to use [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) for this:

```javascript
viewof presidential_term_2 = (options => Inputs.radio(options, {
  key: "2021-2024: Joseph R. Biden",
  sort: true,
  unique: true,
  label: "Select Presidential Term"
}))(d3.group(bills_3, d => d.President))

```

```javascript
viewof year_introduced_2 = (options => Inputs.radio(options, {
  // Select the last key.
  key: [...options.keys()].at(-1),
  sort: true,
  unique: true,
  label: "Select year introduced"
}))(d3.group(presidential_term_2, d => d.year_introduced))

```

```javascript
viewof signed_governor_2 = (options => Inputs.radio(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"
}))(d3.group(year_introduced_2, d => d.action_classification === "executive-signature"))

```

---

<div class="post-metadata">

**Author:** ![mferro64](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mferro64/32/6421_2.png) [@mferro64](https://talk.observablehq.com/u/mferro64)\
**Post date:** [March 27, 2023, 5:13pm UTC](https://talk.observablehq.com/t/nested-input-dynamic-selection/7783/4 "2023-03-27T17:13:47Z")

</div>

This will work - appreciate the help!