jquery .val() to change attribute selected state -

i'm using jquery update select option when value returned via ajax call. i've put simplest form , whilst visible value changes, 'selected' attribute stays

jquery(document).ready(function($) {      $("#fetchcap").on('click',function (e) {          $('#used_car_colour').val('grey');      });  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <input type="button" class="button button-primary" name="fetchcap" id="fetchcap" value="fetch">    <select name="used_car_colour" id="used_car_colour">    <option class="colour-option" value="">none</option>    <option class="colour-option" value="black" selected="">black</option>    <option class="colour-option" value="brown">brown</option>    <option class="colour-option" value="grey">grey</option>    <option class="colour-option" value="white">white</option>  </select>

clicking fetch button change selected value grey. selected attribute should change grey, stays black.

you can set selected option via attribute-selector , set selected-attribute:

$("#fetchcap").on('click', function (e) {     $('#used_car_colour option').attr('selected', false);      //remove other selected-attributes      $('#used_car_colour').val('grey');     $('#used_car_colour option[value=grey]').attr('selected', true);      //set selected attribute selected option }); 

demo