删除所选属性并在select元素上添加新属性

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

Answer 2

无需以selected编程方式更新属性，因为浏览器将自动知道选择了哪个元素。该selected属性仅用于设置页面加载时的默认选项。

\n\n

要获取当前选定的选项，只需使用以下命令：

\n\n

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

\n\n

小提琴示例

\n\n\n\n

更新

\n\n

如果出于某种原因您确实想设置一个selected属性（按照我所理解的形式，您正在动态创建另一个表单），请尝试以下操作：

\n\n

$("#PersonFunction").change(function () {   \n    $("option", $(this)).removeAttr("selected");\n    $("option:selected", $(this)).attr("selected", true);\n});\xe2\x80\x8b\n

\n