1

我有以下内容:

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/

4

3 回答 3

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

演示

于 2012-04-18T08:42:33.243 回答
4

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

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

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

示例小提琴


更新

如果出于某种原因您确实想设置一个selected属性(我可以理解您正在动态创建另一个表单的形式),请尝试以下操作:

$("#PersonFunction").change(function () {   
    $("option", $(this)).removeAttr("selected");
    $("option:selected", $(this)).attr("selected", true);
});​
于 2012-04-18T08:26:34.770 回答
-1

这将提醒您选择的文本。如果您希望它改为选择选项值,请将 .text() 更改为 .val()

$("#PersonFunction").change(function () {
    var selected = $("option:selected").text();
    alert(selected);
});
于 2012-04-18T08:30:29.870 回答