根據用戶提示動態填充選擇框（jQuery/javascript）

Question

如果用戶輸入一個值（通過javascript提示），並且該值存儲在不斷變化的數組中，是否有方法自動更新select在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

類似下面的解決方案應該工作。這樣會覆蓋現有的選項，但可以將它們附加到現有的選項上。

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

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

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

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

Answer 2

所以，我得到了一小會兒那種無聊;既然如此，我可以給你這個：

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。