Удалить выбранный атрибут и добавить новый на выберите элемент

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

Таким образом, после изменения индекса я установил выбранный атрибут, и он работает, но после того, как пользователь снова изменит индекс, я установил еще один выбранный атрибут e на другое значение, и я не хочу этого.

<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

Answer 2

Там нет необходимости обновлять selected атрибут программно, как браузер будет автоматически знать, какой элемент выбран. Атрибут selected предназначен только для установки опции по умолчанию при загрузке страницы.

Для получения текущей выбранной опции, просто используйте следующую команду:

var selectedValue = $("#PersonFunction option:selected").val(); 

Example Fiddle

---

Update

Если по какой-либо причине вы хотите установить атрибут selected (как форма, которую я могу понять, вы создаете другую форму динамически), попробуйте следующее:

$("#PersonFunction").change(function() { 
    $("option", $(this)).removeAttr("selected"); 
    $("option:selected", $(this)).attr("selected", true); 
});​ 

Answer 3

Это предупредит вас, что текст был выбран. изменить .text() для .val(), если вы хотите, чтобы подобрать значения параметров вместо

$("#PersonFunction").change(function() { 
    var selected = $("option:selected").text(); 
    alert(selected); 
});