# Octane and \<select\>

**URL:** <https://discuss.emberjs.com/t/octane-and-select/18195>\
**Category:** Uncategorized\
**Created:** [September 7, 2020, 2:46pm UTC](https://discuss.emberjs.com/t/octane-and-select/18195 "2020-09-07T14:46:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hummingbird](https://avatars.discourse-cdn.com/v4/letter/h/59ef9b/32.png) [@Hummingbird](https://discuss.emberjs.com/u/Hummingbird)\
**Post date:** [September 7, 2020, 2:46pm UTC](https://discuss.emberjs.com/t/octane-and-select/18195/1 "2020-09-07T14:46:05Z")

</div>

Whenever I am in need of a select element, I find myself doing this:

```
  <select local-class="select" onchange={{this.setInterval}} {{did-insert this.updateInterval}} {{did-update this.updateInterval @interval}}>
    <option selected={{eq this.interval "1"}} value="1">1 minute</option>
    <option selected={{eq this.interval "60"}} value="60">1 hour</option>
    <option selected={{eq this.interval "120"}} value="120">2 hours</option>
    <option selected={{eq this.interval "240"}} value="240">4 hours</option>
    <option selected={{eq this.interval "720"}} value="720">12 hours</option>
    <option selected={{eq this.interval "1440"}} value="1440">24 hours</option>
  </select>

```

I am wondering, if there is a good way to remove all that boilerplate and generate an component which behaves more like this:

```
<EmberSelect>
  <Entry @val="1" @text"1 minute"/>
  <Entry @val="60" @text"1 hour"/>
</EmberSelect>

```

I don’t necessarily want to make it exactly look like that, but I want to find a way which lets me remove all the boilerplate code. Pretty much my issues is that I need a way which lets me define the available elements within the block. Any ideas?

(I am aware of power-select, but it’s just too heavy for our needs)

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [September 8, 2020, 2:29pm UTC](https://discuss.emberjs.com/t/octane-and-select/18195/2 "2020-09-08T14:29:40Z")

</div>

Yeah I know what you mean RE power select. I’ve used emberx-select in the past but with Octane it’s super easy to write a little select component like what you’re describing. This is a very basic one I wrote recently:

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

```

and the option component:

```auto
// app/components/u-i/select/option.hbs
<option value={{@value}} selected={{if (eq @currentValue @value) true false}}>{{@label}}</option>

```

And it would be invoked like this…

```auto
<UI::Select @onChange={{action (mut this.someProp)}} @value={{this.someProp}} as |s|>
  <s.option @label="option 1" @value="option1" />
  <s.option @label="option 2" @value="option2" />
</UI::Select>

```

Note that the select component uses the `pick` helper from ember-composable-helpers in order to avoid creating a backing js class with the action. So it would either require using ember composable helpers or defining a js class for the select component with the action handler.

---

<div class="post-metadata">

**Author:** ![Hummingbird](https://avatars.discourse-cdn.com/v4/letter/h/59ef9b/32.png) [@Hummingbird](https://discuss.emberjs.com/u/Hummingbird)\
**Post date:** [September 9, 2020, 8:52am UTC](https://discuss.emberjs.com/t/octane-and-select/18195/3 "2020-09-09T08:52:15Z")

</div>

Thanks a lot . That’s exactly what I was looking for. I think I still need some time to get comfortable with that pattern, though.

---

<div class="post-metadata">

**Author:** ![Dan\_Nelson](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dan_nelson/32/11890_2.png) [@Dan\_Nelson](https://discuss.emberjs.com/u/Dan_Nelson)\
**Post date:** [September 10, 2020, 5:14pm UTC](https://discuss.emberjs.com/t/octane-and-select/18195/4 "2020-09-10T17:14:36Z")

</div>

Hey @Hummingbird, `<select>` elements have always seemed a bit strange in Ember. I’ve been using Zestia’s native select box for years. Rather than author your own, consider using their addon?

> <https://github.com/zestia/ember-select-box/blob/main/tests/dummy/app/templates/native-single-select.hbs>

---

<div class="post-metadata">

**Author:** ![Hummingbird](https://avatars.discourse-cdn.com/v4/letter/h/59ef9b/32.png) [@Hummingbird](https://discuss.emberjs.com/u/Hummingbird)\
**Post date:** [September 12, 2020, 7:13pm UTC](https://discuss.emberjs.com/t/octane-and-select/18195/5 "2020-09-12T19:13:09Z")

</div>

Thank you. But this can be done too easily without adding an addon.