# CanJS 3 - Change Select box data source

**URL:** <https://forums.bitovi.com/t/canjs-3-change-select-box-data-source/604>\
**Category:** CanJS\
**Created:** [April 13, 2017, 9:11am UTC](https://forums.bitovi.com/t/canjs-3-change-select-box-data-source/604 "2017-04-13T09:11:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nmasilva](https://avatars.discourse-cdn.com/v4/letter/n/a4c791/32.png) [@nmasilva](https://forums.bitovi.com/u/nmasilva)\
**Post date:** [April 13, 2017, 9:11am UTC](https://forums.bitovi.com/t/canjs-3-change-select-box-data-source/604/1 "2017-04-13T09:11:47Z")

</div>

Hi there,

I’m trying to make a small example with two way data binding.  
I have a main app with two combo box:  
Combo 1: nokia,siemens  
Combo 2: the years from the selected value from combo1

[  
{  
id: 1,  
name: nokia,  
years: [{value:2016, text: “2016”}]  
},{  
id: 2,  
name: siemens,  
years: [{value:2017, text: “2017”}]  
}  
]

the form load fine, but i have no behavior, this means, when the value in the combo 1 is changed combo 2 don’t change its values.

var Component = require(“can-component”);  
var DefineMap = require(“can-define/map/”);  
var view = require("./jw-select-year.stache");  
var LabelValue = require("~/models/label-value");

var SelectListVM = DefineMap.extend({  
values: LabelValue.List,  
selectedValue : LabelValue,  
set value(value) {  
return value;  
}  
});

module.exports = Component.extend({  
tag: “jw-select-year”,  
view: view,  
ViewModel: SelectListVM  
});

* * *

var Component = require(“can-component”);  
var DefineMap = require(“can-define/map/”);  
var view = require("./jw-select-comp.stache");  
var CompUser = require("~/models/comp-user");

var SelectListVM = DefineMap.extend({  
values: CompUser.List,  
selectedValue : CompUser,  
set value(value) {  
return value;  
}  
});

module.exports = Component.extend({  
tag: “jw-select-comp”,  
view: view,  
ViewModel: SelectListVM  
});

* * *

index.stache

```
  <jw-select-comp {(values)}="compList" />
  <jw-select-year {(values)}="selectedComp.years"/>

```

* * *

jw-select-year.stache

```
<select {($value)}="value">
    {{#each values}}
        <option {($value)}={{value}}>{{text}}</option>
    {{/each}}
</select>

```

* * *

jw-select-comp.stache

```
<select {($value)}="value">
    {{#each values}}
        <option {($value)}={{id}}>{{name}}</option>
    {{/each}}
</select>
```

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [April 29, 2017, 3:04am UTC](https://forums.bitovi.com/t/canjs-3-change-select-box-data-source/604/3 "2017-04-29T03:04:09Z")

</div>

Hi @nmasilva,

Did you figure this issue out?

> [@nmasilva](#):
>
> ```auto
> <option {($value)}={{id}}>{{name}}</option>
> 
> ```

I think that should be:

```auto
<option value="{{id}}">{{name}}</option>

```

[Same thing in the other stache file]

If you could put your code into a JS Bin, that would be helpful for debugging. [JS Bin - Collaborative JavaScript Debugging](https://jsbin.com/safigic/7/edit?html,js,output)