# Trouble With Select and Binding

**URL:** <https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485>\
**Category:** Help Requests\
**Created:** [May 13, 2020, 4:51pm UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485 "2020-05-13T16:51:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 13, 2020, 4:51pm UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/1 "2020-05-13T16:51:23Z")

</div>

I am having trouble duplicating an array that I need in order for the user to select from the dropdown.

The dropdown is sized properly, but the values are all blank. I have copied these arrays from search.html/search.js where they work perfectly.

This is a new view - customer - and the values are blank.

my html code:

```auto
                    <td class="small index_table border">
                        <label for="client">
                            Client:
                        </label>
                        <select name='client' value.bind="selectedClient">
                            <option model.bind="null"></option>
                            <option repeat.for="client of clients"
                                    model.bind="client.client">
                                ${client.client}
                            </option>
                        </select>            
                    </td>
                    <td class="small index_table border">
                        <label for="cust_info_field">
                            Info:
                        </label>
                        <select name='cust_info_field' value.bind="selectedCustInfo">
                            <option model.bind="null"></option>
                            <option repeat.for="info of custInfoField"
                                    model.bind="info.value">
                                ${info.display}
                            </option>
                        </select>

```

and my js code:

```auto
export class Customer {
    constructor(api) {

        this.selectedClient = 0;

        this.clients = [
            { clt_id: 0, client: 'AC Moving' },
            { clt_id: 1, client: 'Air Van' },
            { clt_id: 2, client: 'Berger' },
            { clt_id: 3, client: 'Berger Escalated' },
            { clt_id: 4, client: 'Berger Term Drivers' },
            { clt_id: 5, client: 'Morse Moving' },
            { clt_id: 6, client: 'Nor-Cal' },
            { clt_id: 7, client: 'Pyramid' },
            { clt_id: 8, client: 'Reliable' },
            { clt_id: 9, client: 'Santini' },
            { clt_id: 10, client: 'SMMoving' },
            { clt_id: 11, client: 'Stratosphere' }
        ];
    
        
        this.selectedCustInfo = 0;
        
        this.custInfoField = [
            { value: 'All', display: 'All' },
            { value: 'Name', display: 'Name' },
            { value: 'Contacts', display: 'Contacts' },
            { value: 'City', display: 'City' },
            { value: 'My Notes', display: 'My Notes' },
            { value: 'All Notes', display: 'All Notes' },
            { value: 'Report As', display: 'Report As' },
            { value: 'Parent Customer', display: 'Parent Customer' },
        ];
    
    }
}

```

My custInfo dropdown did have values in it until i added the `this.selectedCustInfo = 0;`, so I am not sure what is going on, or what I’ve done wrong. Especially as it worked fine in another view.

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [May 13, 2020, 8:37pm UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/2 "2020-05-13T20:37:06Z")

</div>

> [@rhysshadow](#):
>
> ```auto
> <select name='client' value.bind="selectedClient">
> <option model.bind="null"></option>
> <option repeat.for="client of clients"
> model.bind="client.client">
> ${client.client}
> </option>
> </select> 
> 
> ```

should model.bind=“client.client” just be model.bind=“client”?  
only thing I see different from the doc examples and think the next line is trying t o access a property called client on a string?

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 13, 2020, 11:17pm UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/3 "2020-05-13T23:17:35Z")

</div>

I have a property called client, which is why it says ‘client.client’

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [May 14, 2020, 2:49am UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/4 "2020-05-14T02:49:48Z")

</div>

I loaded up me…er…dumber and copied your code in. It appears model.bind wasn’t doing what I thought it was (and can actually be removed with no effect.) The select works just fine there.  
[https://gist.dumber.app/?gist=9ebeb1691665d0005f63e1165f86ef91](https://gist.dumber.app/?gist=9ebeb1691665d0005f63e1165f86ef91)

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [May 14, 2020, 4:44am UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/5 "2020-05-14T04:44:46Z")

</div>

You need to set it to `model.bind="client.clt_id"`. That way, your default value of 0 will match your first item in the data model.

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [May 14, 2020, 2:13pm UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/6 "2020-05-14T14:13:43Z")

</div>

Updated the dumber gist to show what @khuongduybui was saying.  
And I got educated again on what model.bind is doing.

Notice for custInfoField that you were trying to set the selected to 0 (zero) when the value being bound was a string. I changed that to “All” to select the first value and it now displays the first option element.

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [May 14, 2020, 2:28pm UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/7 "2020-05-14T14:28:42Z")

</div>

Another trick: if we want to keep `this.selectedCustInfo = 0` we can also do `model.bind="$index"` 😉

That would have also worked for the first `<select>`, since `clt_id` is equal `$index` with given data.  
I recommended `clt_id` simply because it is safer and will work with arbitrary data too.

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [May 14, 2020, 2:33pm UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/8 "2020-05-14T14:33:36Z")

</div>

I added that in a second example.

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 14, 2020, 2:48pm UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/9 "2020-05-14T14:48:47Z")

</div>

Thank you! it is now working.

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [May 14, 2020, 3:15pm UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/10 "2020-05-14T15:15:24Z")

</div>

Apologies to the OP but I think this is still related to the question / issue so left it here.  
@khuongduybui Just so I have it in my head again.

Why use model.bind?  
In this case model.bind instead of value.bind for the option element?

At first I thought it might just be a set the default value holder (which it kind of does), but in the docs for checkboxes at least I see both model.bind and checked.bind being used together.

Then I finally found this:  
_Normally we cannot use the standard `value` attribute in conjunction with checked binding because it coerces anything it’s assigned to a string._

Does this mean that by using model.bind it prevents coercion, so all native types can be assigned to the ‘value’ attribute on elements with a value property though the use of model.bind?  
So for example numbers, objects, functions, etc can now be stored and retrieved intact from value?

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [May 15, 2020, 4:34am UTC](https://discourse.aurelia.io/t/trouble-with-select-and-binding/3485/11 "2020-05-15T04:34:27Z")

</div>

Correct. If you set in the first example `model.bind="client"`, then you can show later `<p>You selected a client with name ${selectedClient.client} and id ${selectedClient.ctl_id}</p>`.