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属性仅用于在页面加载时设置默认选项。

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

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

Example Fiddle

<强>更新

如果出于某种原因你想要设置一个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);
});

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

3 个答案: