0

ユーザーが (javascript プロンプトを介して) 値を入力し、その値が変化する配列に格納されている場合、ユーザーが入力した値で HTML フォームの選択ボックスを自動的に更新する方法はありますか? 私は jquery とフロントエンドの設計にかなり慣れていないため、ページが読み込まれた後にこれを実行できるかどうか確信が持てないため、質問します。

回答してくれた 2 人の助けに感謝します。両方の回答が役に立ったとして賛成しますが、まだ十分な評判がありません。

私の質問をもう少し明確にするために、ユーザーのプロンプトに基づいて、値が自動的に入力される選択ボックスを表示したいと考えています。

たとえば、私が持っている場合 

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

これが完全に可能でない場合は理解していますが、それが最初に質問した理由です。

編集：

ここで解決策を見つけました 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 に答える