Question

我的函数清除了一个下拉列表，然后重新填充它。我真的需要这一切还是有更简洁的方法来做到这一点？我需要创建一个新的document.createElement（“option”）;还是有捷径？

        for (blah blah blah) 
        {
            objNewOption = document.createElement("option");
objNewOption.value = day;
objNewOption.text = day;
birthDay.options.add(objNewOption);
        }

Answer 1

var new_option_element = new Option(display_label, value, selected_boolean);

Answer 2

创建自己的快捷方式......

function x() { return document.createElement("option"); }

for(blah blah blah) {
  objNewOption = x();
}

Answer 3

真的那么久吗？输入的内容并不多。

如果您想使用MooTools或Prototype等框架，他们会有一个Element类，让您可以在一行中完成。

var opt = new Element('option', { value: day, text: day });

Answer 4

document.createElement技术的最大问题在于它真的很慢。使用框架是最好的，但不管怎样，我建议构建选项列表并在选择框上设置innerHTML属性。

strOptions = "";
for (blah blah blah) 
{
    strOptions += '<option value="' + day + '">' + day + '</option>'
}
birthDay.innerHTML = strOptions;

浏览器将能够比你手动构建这些元素更快地解析HTML。

在回应评论时，这就是为什么使用平台库总是值得的。在YUI3中，我这样做：

var fillSelectbox = function(select, optionList) {
    var i, option = '';
    for (i = 0; i < optionList.length; i += 1) {
        option += '<option value="' + optionList[i].Value + '" selected="' + (optionList[i].selected ? '"selected"' : '""') + '">' + optionList[i].Text + '</option>';
    }
    select.append(option);
    select.set('selectedIndex', -1);
};

其中select是selectNode，optionList是JavaScript数组。

document.createElement（“option”）的快捷方式？

4 个答案: