Create a form with multiple selects that dynamically update based off of selections?

1

I want to create a form with 3 selects within it. The selects will look similar to the following: ‘Please select a city’ ‘Please select an attraction’ ‘Please select a season’

I have a set of cities that contain attractions. Those attractions contain seasons.

When the user selects a city in the first select box, I want the 2 select boxes below to only have options for the city selected in the first box.

It was very easy to get the first select box working.

{{view Ember.Select
    content=App.cities
    optionValuePath="content.id"
    optionLabelPath="content.name"
    prompt="Please select a city"}}

I think I want to add an observable on the selects, but I’m not sure what I want to observe. Initially, I thought I might observe cities, but what I really want observe is a change in selection, so that a filter kicks off in the other selections.

Any ideas on how to proceed on adding some dynamic updating to these selects based off of a selection in the first select?

2

Ah… this gnarly problem. :slight_smile: hehe. I’ve seen this quite a few times (sure you have too)!

Lets call them one, two and three.

So, you don’t seem to have bound a selection to “one” using selectionBinding=“something”. You need to do that. When you’ve got a selection value/variable set, you can then use that to inform a property of “one”'s selection - let’s call this “two’s content” (because it is). This returns an array of filtered items based on “one”'s selection.

Based on what you’ve said, I think you’ll have no trouble walking the rest of the path?

3

Thanks, Julian. That is very helpful and I should be able to follow that along, transferring what you suggested into working code.