Question

I have the following:

HTML

<select class="dropDownList" id="PersonFunction">
    <option value="">Choose</option>
    <option value="1">Vice President</option>
    <option value="2">Director</option>
    <option value="3">Secretary</option>
    <option value="4">Clerk</option>
</select>​

JS

$("#PersonFunction").change(function () {    
    $("option", this).eq($(this).val()).attr('selected', 'selected');
});​

So after the index change i set the selected attribute and it works but after the user changes the index again i set yet another selected attribute on different value and i don’t want that.

<select class="dropDownList" id="PersonFunction">
    <option value="">Choose</option>
    <option value="1" selected="selected">Vice President</option>
    <option value="2" selected="selected">Director</option>
    <option value="3">Secretary</option>
    <option value="4">Clerk</option>
</select>

How can i first remove selected attribute if one exists then add one?

JsFiddle here: http://jsfiddle.net/mgrcic/HCrS2/

Answer 1

$('#PersonFunction').on('change', function() {
  $('option:selected', this).attr('selected',true).siblings().removeAttr('selected');
});

DEMO