Getting option value for a select tag in Ember

Questions General
1

Hey everyone,

I’m creating a form that’ll need to use a select element, and I don’t know how I should go about getting the value from the selected option tag. I have this select tag as a separate component and am trying to update a tracked variable called “value” using the option tag data. I know this is likely very simple, but I nevertheless want to ask you all about it.

Here are some images:

select-component
select-component838×192 35.3 KB

select-component-class
select-component-class834×505 56.5 KB

Thanks in advance.

2

When you attach the “change” event via {{on ...}} modifier you are basically just adding an onchange handler . Your handler (in this case your “change_select” action) will receive a javascript Event which you can grab target.value from to get the new value of the select.

Here’s an example of a generic select component. Here i’m using the pick helper from ember-composable-helpers to grab target.value from the event without using javascript.

// components/u-i/select.hbs

<select
  ...attributes
  {{on "change" (pick "target.value" @onChange)}}
>
  {{yield (hash option=(component "u-i/select/option" currentValue=@value))}}
</select>

and the option component

// components/u-i/select/option.hbs

<option value={{@value}} selected={{if (eq @currentValue @value) true false}}>{{@label}}</option>

The component would be invoked like so:

<UI::Select @onChange={{this.change_select}} as |select|>
  <select.option @label="Not applicable" @value="N/A" />
  <select.option @label="Separable" @value="Separable" />
  <select.option @label="Inseparable" @value="Inseparable" />
</UI::Select>
1 Like