Implement a dynamic select

1

I’m new to Stimulus and as a learning experience, I’m trying to implement a dynamic select menu. You know, the one that changes option according to the option selected on another select.

Here is my HTML

<div data-controller='dash'>
  <div>
    <select name="state" id="state" data-action="change->dash#change" data-target="dash.state">
      <option value="">STATE</option>
      <option value="Tennessee">Tennessee</option>
      <option value="North Carolina">North Carolina</option>
      <option value="North Dakota">North Dakota</option>
      </select>
  </div>
  <div>
    <select name="city" id="city" data-target="dash.city">
      <option value="">CITY</option>
      <option data-dash-state="Tennessee" value="Knoxville">Knoxville</option>
      <option data-dash-state="North Carolina" value="Fayetteville">Fayetteville</option>
      <option data-dash-state="North Dakota" value="Rapid City">Rapid City</option>
      <option data-dash-state="North Carolina" value="Greensboro">Greensboro</option>
      <option data-dash-state="North Carolina" value="Greenville">Greenville</option>
      <option data-dash-state="North Dakota" value="Aberdeen">Aberdeen</option>
      <option data-dash-state="Tennessee" value="Chattanooga">Chattanooga</option>
      <option data-dash-state="North Carolina" value="Winston-Salem">Winston-Salem</option>
      <option data-dash-state="North Dakota" value="Sioux Falls">Sioux Falls</option>
    </select>
  </div>
</div>

Now I’m trying to get the state (data-dash-state) associated to the selected option so, I first select I city, then a state to trigger change->dash#change (this will be changed once all the pieces will be in place), but I get the following error.

application.js:57 Error invoking action "change->dash#change"

TypeError: Cannot read property 'get' of undefined
    at Controller.change (dash_controller.js:8)
    at Action.invokeWithEvent (action.js:41)
    at Action.handleEvent (action.js:18)

What am I missing here?

2

What does the controller look like?

3

@sigfrid Did you ever find a solution for this? I’m trying to replace some old Angular code with Stimulus and I’ve got dynamic selects as well.

I’d love to know what you did!