Динамически набирать поле выбора на основе пользовательских запросов (jquery/javascript)

Question

Если пользователь вводит значения (с помощью подсказки javascript), и это значение сохраняется в изменяющемся массиве, есть ли способ автоматически обновить выбор в форме HTML со значениями, вводимыми пользователем? Я спрашиваю, потому что я довольно новичок в дизайне jquery и front-end, и я не уверен, что это можно сделать после загрузки страницы.

Я ценю помощь от двух человек, которые отреагировали, и я бы поддержал ваши ответы как полезные, но у меня пока нет достаточной репутации.

Чтобы уточнить мой вопрос немного лучше, то, что я хотел бы видеть, - это окно выбора, автоматически заполняемое значениями, на основе пользовательских подсказок.

Например, если у меня есть

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

Если это не вполне возможно, я понимаю, но вот почему я задал этот вопрос в первую очередь.

EDIT:

Найдено решение здесь 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) 
}); 

Fiddle: 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.