防止选择框更改

Question

I'm working on an angular js 2 project and I need to create a dropdown (kinda like a link) wherein if you select an option it will trigger an onchange event and redirect the user. Currently I have this:

<select id = "dashboard" onchange="goToPage()" class="form-control">
  <option value="" selected disabled>{{ 'Create' | translate }}</option>
  <option value="Applicant" >{{ "dashboard.applicant" | translate}}</option>
  <option value="Reports">{{ "dashboard.report" | translate}}</option>
</select>

In the select box I want the 'Create' option to always be selected even if the applicant selects Applicant or Reports. How can I do this behavior?

Answer 1

You can't cast onchange if user can't change selected value at all, but you can place inside your function this line document.getElementById("dashboard").selectedIndex = 0; which will select first option again:

 function goToPage(){ document.getElementById("dashboard").selectedIndex = 0; } 

 <select id = "dashboard" onchange="goToPage()" class="form-control"> <option value="" selected disabled>{{ 'Create' | translate }}</option> <option value="Applicant" >{{ "dashboard.applicant" | translate}}</option> <option value="Reports" >{{ "dashboard.report" | translate}}</option> </select>