使用jQuery在option元素上设置selected属性

Question

我正在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);
});

还有其他或更好的方法吗？

Answer 1

您可以使用本机setAttribute()方法.我相信jQuery会混淆属性和属性之间的区别.

这<option>将从<select>元素的索引中获取您想要的内容options collection,并设置属性:

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

或者这使用jQuery首先设置值,然后返回并使用native selectedIndex属性获取正确的选项.

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

编辑:关闭主题一点点,但你可以<option>像这样创建一些不同的元素:

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

从jQuery 1.4开始,您可以发送一组要为新元素设置的值.