Question

为什么这段代码在jQuery 1.5中运行良好而在jQuery 1.6中运行不正常？ jquery如何在这两个版本之间创建DOM节点有一个已知的变化吗？

var birth = new Date(),
    current = new Date().getFullYear() - 13,
    year = $('select#year'),
    i = 0;
birth.setFullYear(1992, 10, 3);
while (i < 48) {
    var option = $('<option>', { 
        value: current - i,
        text: current - i,
        selected: (current - i === birth.getFullYear()) ? 'selected' : ''
    });
    year.append(option);
    i++;
}

请参阅this working jsfiddle using 1.5和this non-working jsfiddle using 1.6。第一个选项只选择一个选项，但第二个选项会为每个选项添加selected="selected"。

注意我此时只在Chrome中对此进行了测试。

Answer 1

selected: (current - i === birth.getFullYear()) ? 'selected' : ''

将生成

selected="selected"

或

selected=""

在这两种情况下，浏览器都会考虑selected设置。那是因为selected是一个布尔值;仅仅存在就表示应该选择它。

你应该使用jQuery 1.6中引入的prop：

var option = $('<option>', { 
        value: current - i,
        text: current - i
    }).prop('selected', current - i === birth.getFullYear());

http://jsfiddle.net/Z7umc/3/

或者，如果您希望在对象中拥有所有内容：

var option = $('<option>', { 
        value: current - i,
        text: current - i,
        selected: (current - i === birth.getFullYear())
    });

Answer 2

将else部分设为false

var birth = new Date(),
    current = new Date().getFullYear() - 13,
    year = $('select#year'),
    i = 0;
birth.setFullYear(1992, 10, 3);
while (i < 48) {
    var option = $('<option>', {
        value: current - i,
        text: current - i,
        selected: ((current - i) === (birth.getFullYear())) ? 'selected' :false
    });
    year.append(option);
    i++;
}

这里是小提琴http://jsfiddle.net/Z7umc/4/

使用'selected'属性创建DOM'选项'元素

2 个答案: