Question

如果用户输入值（通过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

Answer 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对象/节点，您可以在任一方法中调用它们订单（只要显然，您选择元素第一个），例如两者这些方法是有效和可用的：

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。

Answer 2

下面的内容应该有效。这种方式将覆盖现有选项，但可以将它们附加到现有选项中。

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

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

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

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

根据用户提示动态填充选择框（jquery / javascript）

2 个答案: