根据用户提示动态填充选择框（jquery/javascript）[关闭]答案

【问题标题】：Populate select box dynamically based on user prompts (jquery/javascript) [closed]根据用户提示动态填充选择框（jquery/javascript）[关闭]
【发布时间】：2013-04-13 23:48:31
【问题描述】：

如果用户输入了一个值（通过 javascript 提示符），并且该值存储在一个不断变化的数组中，有没有办法使用该值自动更新 HTML 表单中的选择框用户输入？我问是因为我对 jquery 和前端设计还很陌生，我不确定这是否可以在页面加载后完成。

感谢回复的两个人的帮助，我会认为你的两个答案都有帮助，但我还没有足够的声誉。

为了更好地澄清我的问题，我希望看到一个选择框根据用户提示自动填充值。

例如，如果我有

var r = true;
while(r == true){
var path = window.prompt("Please enter path here"); 
//I would like to put <option>path</option> inside a selection box
var r = confirm("Enter another path?");
}

如果这不完全可能，我理解，但这就是我首先提出这个问题的原因。

编辑：

在这里找到了解决方案 How to add option to select list in jQuery

【问题讨论】：

好吧，我赞成，因为我喜欢这个挑战。而且我确实认为这是一个有用的问题和资源（尽管很明显，这至少部分出于自身利益的动机）。

标签： javascript jquery html forms

【解决方案1】：

所以，我有点无聊了一会儿；既然如此，我可以给你这个：

var startValues = ['apple', 'banana', 'cherry'];

function childElementType(node) {
    var props = {
        childType: '',
        textType: Node.textContent ? 'textContent' : 'innerText',
        hasValue: false
    };
    switch (node.tagName.toLowerCase()) {
        case 'select':
            props.childType = 'option';
            props.hasValue = true;
            break;
        case 'ol':
        case 'ul':
            props.childType = 'li';
            break;
    }
    return props;
}
Object.prototype.populate = function (values) {
    if (this.length) {
        return this;
    } else {
        var child = childElementType(this),
            newChild;
        for (var i = 0, len = values.length; i < len; i++) {
            newChild = document.createElement(child.childType);
            newChild[child.textType] = values[i];
            if (child.hasValue) {
                newChild.value = newChild[child.textType];
            }
            this.appendChild(newChild);
        }
    }
    return this;
};

Object.prototype.addTo = function (message) {
    var control = document.createElement('button'),
        that = this;
    control.appendChild(document.createTextNode(message || '+ add to ' + that.tagName.toLowerCase()));
    this.parentNode.insertBefore(control, this.nextSibling);
    var child = childElementType(this);

    function addNew() {
        var text = prompt('Add the new entry:'),
            newEntry;
        if (text) {
            newEntry = document.createElement(child.childType);
            newEntry[child.textType] = text;
            that.appendChild(newEntry);
        }
    }
    control.onclick = addNew;
    return this;
};

document.getElementById('select').populate(startValues).addTo();
document.getElementById('ul').populate(startValues).addTo();

JS Fiddle demo.

您还可以将默认消息传递给addTo() 方法，为创建的按钮提供特定文本，并且由于每个方法都返回this 对象/节点，您可以按任意顺序调用它们（只要显然，您选择元素 first)，例如 both 这些方法都是有效且可用的：

document.getElementById('select').addTo('Moar options..?').populate(startValues);
document.getElementById('ul').populate(startValues).addTo('Go on, add more!');

JS Fiddle demo.

参考资料：

Conditional ('ternary') operator.
document.createElement().createTextNode
document.createTextNod()。
for (...) {} loop。
Node.appendChild()。
Node.insertBefore()。
Node.textContent。
switch () {...}。
window.prompt。

【讨论】：

【解决方案2】：

类似下面的东西应该可以工作。这种方式会覆盖现有的选项，但可以将它们附加到现有的选项中。

$("#saveButton").on("click", function(){
    var options = '';

    for ( var item in optionsArray ){
        options += "<option>" + item +"</option>";
    }    

    $('#selectbox').html(options)
});

小提琴：http://jsfiddle.net/njgray/BM8KL/

【讨论】：