使用jQuery为选项元素设置实际的selected属性

Question

使用jQuery为选项元素设置实际的selected属性

6

我正在使用jQuery生成带有选项元素的选择列表。简化后看起来像这样：

var sel = $("<select>");
$.each(data, function(i, v){
    $("<option>").attr({ "value": i }).html(v).appendTo(sel);
});

我希望可以选择一个选项。通常我会这样做:

$(sel).val(1);

但是选项没有被选中的属性。
$(sel).html() 返回类似于以下内容：

<option value="1">1</option>
<option value="2">2</option>

这是我期待的结果：

<option value="1" selected="selected">1</option>
<option value="2">2</option>

我尝试了这种方法（与使用.val()相同的结果）：

$.each(data, function(i, v){
    var attrs = { "value": i };
    if(i == 1){
        attrs.selected = "selected";
    }
    $("<option>").attr(attrs).html(v).appendTo(sel);
});

但我找到的唯一有效的方法是：

$.each(data, function(i, v){
    var el = "<option>";
    if(i == 1){
        el = '<option selected="selected"></option>';
    }
    $(el).attr({ "value": i }).html(v).appendTo(sel);
});

有没有其他更好的方法？

- sunn0

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user113716 · Accepted Answer

你可以使用本地的setAttribute()方法。我认为jQuery混淆了属性和属性之间的区别。

通过从<select>元素的options collection中获取所需的<option>，并设置属性：

sel[0].options[1].setAttribute('selected','selected');

或者使用jQuery先设置值，然后再使用原生 selectedIndex 属性获取正确的选项。

sel.val(1);
sel[0].options[sel[0].selectedIndex].setAttribute('selected','selected');

编辑： 有点跑题，但是你可以像这样稍微不同地创建<option>元素：

$("<option>",{
    value: i,
    html: v
}).appendTo(sel);

自从jQuery 1.4版本以来，您可以发送一个值集合，用于设置新元素。