javascript - 面向对象的JS下拉列表？

Question

我使用 OO JS 创建了一个按钮，稍后将用于更新某些内容。我还想在我的网络应用程序中添加一个下拉菜单/选择列表。我用于按钮的代码是：

    var AddButton = function(label){
    var _dom_element = document.createElement("input");
        _dom_element.type = "button";
        _dom_element.value = label;

        _dom_element.onclick = function(){
            //click_action.call(null);
            alert("Im Clicked");
        };
        this.getDomElement = function() {
            return _dom_element;
        }
    }

如何更改此代码使其成为下拉菜单/选择列表？

我最好的猜测是 _dom_element.type = "select"; 或类似的东西，但是我不知道实际类型应该等于什么。

谢谢你提供的所有帮助。

Answer 1

你可以试试这个

var AddSelect = function(options){
    var _dom_element = document.createElement("select");

    for ( var i = 0; i < options.length; i++ ) {
        var _option = document.createElement("option");
            _option.value = options[i];
            _option.innerHTML = options[i];

        _dom_element.appendChild(_option);
    }

    document.body.appendChild(_dom_element);

    _dom_element.onclick = function(){
        //click_action.call(null);
        //alert("Im Clicked");
    };
    this.getDomElement = function() {
        return _dom_element;
    }
}

AddSelect(['option1', 'option2', 'option3']);

演示

Answer 2

var AddSelect = function(options){
    var _dom_element = document.createElement("select");

    for ( var i = 0; i < options.length; i++ ) {
        var _option = document.createElement("option");
            _option.value = options[i];
            _option.innerHTML = options[i];

        _dom_element.appendChild(_option);
    }

    document.body.appendChild(_dom_element);

    _dom_element.onclick = function(){
        //click_action.call(null);
        //alert("Im Clicked");
    };
    this.getDomElement = function() {
        return _dom_element;
    }
}

AddSelect(['option1', 'option2', 'option3']);