mdc-select with preselection in Aurelia

I’ve a question about the mdc-select component. We’re using Aurelia for binding purposes with the mdc components. With the normal HTML5 approach, we can use this:

<select value.bind="selectedPersonID" class="mdc-select mdc-list-item__end-detail">
  <option model.bind="null">Select person</option>
  <option repeat.for="person of Persons" model.bind="person.ID">${person.Name}</option>
</select>

We’ve only the “selected item” as PersonID available. This approach works with the “init” (it shows the selected person with the name).

With mdc-select, the approach is a little different because there is a span. The next code is for the mdc-select.

<div mdc-select role="listbox" class="mdc-select mdc-list-item__end-detail">
  <span class="mdc-select__selected-text">????</span>
  <div class="mdc-simple-menu mdc-select__menu">
    <ul class="mdc-list mdc-simple-menu__items">
      <li class="mdc-list-item" role="option" repeat.for="person of Persons" model.bind="person.ID">${person.Name}</li>
    </ul>
  </div>
</div>

We’ve got a “selectedPersonId” for the selected person. I can also put the aria-selected property on the right “li-tag” (not in the code). That works like a charm when clicking the list open (it’s selected). But on init it won’t show on the question marks.

My question is: How can i preselect an item in the mdc-select with only the “PersonId” available, so that the span is also filled with the chosen Person.Name. Is it possible to dynamically change the “span” tag with the chosen aria-selected or something?

Thanks a lot! Keep up the good work!

[yeelan0319]

I am going to close this issue since it is no longer a MDC question, but feel free to paste the answer in the following thread. @jordyboytjuh

[teoxoy]

You can do it using the MDCSelect object in js. At the end of the function attached() you should set the property selectedIndex to the index you want. Example: this.mdcSelect.selectedIndex = index;