Javascript Question

Change option value of select box on calling function

Hy!
I am using select box in which i have two options. When i clicks on one option named "Reposition cover".It calls the JavaScript function. After function calling, It displays the "Reposition cover" in select box (default behavior of select box). But i want to display the default value('Chnage' in my case) in select box once the function is called.
And when the user will again click on "Reposition cover" option, the function will again call and select box will return it's default value and so on.
Following is my code that i write to achieve this

Html

<select id="cars">
<option value="change" selected="selected">Change</option>
<option value="rep">Reposition cover</option>
<div>Reposition cover</div>

</select>


Javascript

<script type="text/javascript">

$(document).ready(function(){
e1 = document.getElementById('cars');
if(e1)
{
e1.addEventListener('change', function() {
if(this.value == 'rep'){
repositionCover();
/*Execute your script */
}
else
{

}
});
}


});
</script>

Answer

Just reset the value of the select

$(document).ready(function(){
  $('#cars').on('change', function() {
    if(this.value == 'rep'){
      this.value = 'change';
      //repositionCover();
    } else {
      
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cars">
  <option value="change" selected="selected">Change</option>
  <option value="rep">Reposition cover</option>
  <div>Reposition cover</div>

</select>