jquery - 删除选定的属性并在选择元素上添加新的属性

Question

我有以下内容:

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');
});​

因此，在索引更改后，我设置了选定的属性并且它可以工作，但是在用户再次更改索引后，我在不同的值上设置了另一个选定的属性，但我不希望这样。

<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>

如何先删除选定的属性(如果存在)然后再添加一个？

这里是 JsFiddle:http://jsfiddle.net/mgrcic/HCrS2/

Answer 1

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

DEMO