0

If a user enters a value(s) (via javascript prompt), and that value is stored in a changing array, is there a way to automatically update a select box in an HTML form with the value(s) that the user enters? I ask because I am fairly new to jquery and front-end design, and I'm not certain if this can be done after a page is loaded.

I appreciate the help from the two people who responded, and I would upvote both of your answers as helpful, but I do not have enough reputation yet.

To clarify my question a bit better, what I would like to see happen is a select box automatically filled with values, based on user prompts.

For example, if I have 

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?");
}

If this is not entirely possible, I understand, but that's why I asked the question in the first place.

EDIT:

Found a solution here How to add option to select list in jQuery

4

2 回答 2

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 小提琴演示。

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

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

JS 小提琴演示。

参考：

于 2013-04-14T00:38:52.307 回答
0

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

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

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

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

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

于 2013-04-13T23:57:18.113 回答