# \[Fixed\] Select Binding--Two linked Selects work buggy under special scenario

**URL:** <https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049>\
**Category:** Help Requests\
**Created:** [April 6, 2018, 12:05pm UTC](https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049 "2018-04-06T12:05:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Puppy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/puppy/32/734_2.png) [@Puppy](https://discourse.aurelia.io/u/Puppy)\
**Post date:** [April 6, 2018, 12:05pm UTC](https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049/1 "2018-04-06T12:05:27Z")

</div>

I have two selects, and second one is affected by first one. Please see below code.

select-test.ts

import { autoinject } from “aurelia-framework”;

@autoinject()  
export class SelectTest {  
private output = [  
{ “class”: “SNY”, “student”: [“Tom”, “Bob”, “Peng”] },  
{ “class”: “TXC”, “student”: [“King”] },  
{ “class”: “YUP”, “student”: [“Ken”, “Knight”, “Pat”] },  
{ “class”: “ANV”, “student”: [“Pappy”] }  
];  
private school = [];  
private selectedClass = {};  
private selectedStudent = ‘’;  
private myclass = ‘YUP’;  
private mystudent = ‘Pat’;

```
constructor() {        
    this.school = this.output;
   // To set default values.
    this.selectedClass = this.school.find(x => x.class === this.myclass);
    this.selectedStudent = this.mystudent;
}

```

}

select-test.html – pleae see below image( I don’t know how to early paste html here.).

And there is a issue if you try below steps, please see below image.  
step1: select class “TXC”;  
step2: select class “ANV”;  
It seems that switching between two lists whose length is 1 causes the issue, and I have no clue.  
Is there anything related to data-binding system? Anyone knows why? : )

 ![test](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/9417142ddc32b653112509b57668ca1692e9a3fc.PNG)

There is a workaround, which add a change.delegate=“triggerChange()” to first select and manully update the value of second select by triggerChange().

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 6, 2018, 1:19pm UTC](https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049/2 "2018-04-06T13:19:41Z")

</div>

You can try to set a default student whenever selected class changes.

```auto
@observable private selectedClass = {};

selectedClassChanged(newClass) {
  if (newClass && newClass.student && newClass.student.length) {
    this.selectedStudent = newClass.student[0];
    // you can also retain current selectedStudent value
    // if the newClass includes current selectedStudent.
  } else {
    this.selectedStudent = '';
  }
}

```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 7, 2018, 5:58am UTC](https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049/3 "2018-04-07T05:58:34Z")

</div>

Fix PR [https://github.com/aurelia/binding/pull/677](https://github.com/aurelia/binding/pull/677)

Would be nice if you could check to see if it fixes this bug.

---

<div class="post-metadata">

**Author:** ![Puppy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/puppy/32/734_2.png) [@Puppy](https://discourse.aurelia.io/u/Puppy)\
**Post date:** [April 7, 2018, 7:16am UTC](https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049/4 "2018-04-07T07:16:17Z")

</div>

Thanks for your more preety solution.

---

<div class="post-metadata">

**Author:** ![Puppy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/puppy/32/734_2.png) [@Puppy](https://discourse.aurelia.io/u/Puppy)\
**Post date:** [April 7, 2018, 7:36am UTC](https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049/5 "2018-04-07T07:36:29Z")

</div>

I add ‘characterData: true’ to line 148 in node\_modules/aurelia-binding/src/select-value-observer.js. And run again, and the issue is still there. Please check it out. The key point is that there are two selects whose child select only has one item.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 7, 2018, 7:54am UTC](https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049/6 "2018-04-07T07:54:08Z")

</div>

The `src` folder is for development, so you need to add it to either `node_modules/aurelia-binding/dist/amd` (requirejs / systemjs) or ~~`node_modules/aurelia-binding/dist/commonjs`~~ `node_modules/aurelia-binding/dist/native-modules` (webpack)

---

<div class="post-metadata">

**Author:** ![Puppy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/puppy/32/734_2.png) [@Puppy](https://discourse.aurelia.io/u/Puppy)\
**Post date:** [April 7, 2018, 8:10am UTC](https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049/7 "2018-04-07T08:10:36Z")

</div>

Sorry, I am a newbie here and know not much about the aurelia framework structure.  
I tried again and the issue is fixed. Thank you very much.  
One more question, could I use this fix in production, or I use workaround instead right now?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 7, 2018, 8:15am UTC](https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049/8 "2018-04-07T08:15:43Z")

</div>

Yould could do the following in your `main.js` while waiting for the PR

```auto
import { SelectValueObserver, DOM } from 'aurelia-framework';

SelectValueObserver.prototype.bind = function() {
  this.domObserver = DOM.createMutationObserver(() => {
    this.synchronizeOptions();
    this.synchronizeValue();
  });
  this.domObserver.observe(this.element, { childList: true, subtree: true, characterData: true });
}

```

---

<div class="post-metadata">

**Author:** ![Puppy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/puppy/32/734_2.png) [@Puppy](https://discourse.aurelia.io/u/Puppy)\
**Post date:** [April 7, 2018, 8:22am UTC](https://discourse.aurelia.io/t/fixed-select-binding-two-linked-selects-work-buggy-under-special-scenario/1049/9 "2018-04-07T08:22:49Z")

</div>

Okay, that’s great! : )