CODEWITHSUNDEEP
jqueryhtmljquery-select2aurelia
Dani Feldman
Dani Feldman

Reputation: 186

Add selected attribute to a option based on a expression in Aurelia

I have a select html tag(using select2) in my Aurelia view in which I want to add the selected attribute to a option tag based on an boolean expression. The expression will be true only once. Here is my code(this works fine):

<select class="js-example-basic-single" style="width:200px;">
  <option repeat.for="region of personRegionDetail" value="${region.Id}">${region.Name}</option>
</select>

I am looking for something like this(if it`s possible) inside my option tag:

${if(region.Id === persondetail.RegionId){ selected }}

I also tried using jQuery, but this shows me the selected option only when I refresh the page:

<script type="text/javascript">
  //Initialize select2
  $('select.js-example-basic-single').select2();
  //I tried this
  //The searched option value contains ${persondetail.RegionId} 
  $('select.js-example-basic-single').val("${persondetail.RegionId}").trigger("change");
</script>

I acces the page from another view by clicking to a link using route-href="route:routename"(if it tells something).

My question is how can I solve this problem to show the selected option when I entered to the page?

EDIT: I need to initialize the select2 after some miliseconds in order to shows the selected option(probably I must wait for the API to respond). This caused the problem with jQuery.

Upvotes: 3

Views: 691

Answers (1)

Buzinas
Buzinas

Reputation: 11725

You must use selected.bind:

<option repeat.for="region of personRegionDetail" value="${region.Id}" selected.bind="region.Id === $parent.Id">${region.Name}</option>

Plunker: http://plnkr.co/edit/Uy6eQWZu6PrOwaXeArOx?p=preview

Upvotes: 4

Related Questions