Как динамически заполнить выпадающий список из текстового поля

Question

У меня есть форма, где пользователь должен ввести список выбора в ряд текстовых полей: , например:

Enter speaker name 1: [ ] [] remove speaker 
    Enter speaker name 2: [ ] [] remove speaker 
    Enter speaker name 3: [ ] [] remove speaker 

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

Другой выпадающий что-то вроде:

Dialogue: [ text box] 
Select Speaker: [....target drop down where the above entered options have to show up....] 

Любые мысли? Я работаю с Javascript и PHP.

Спасибо!

Answer 1

Это должно получить вас на вашем пути

var myName = "foo", myValue = "bar" 

var select = document.getElementById("mySelect"); 
select.options[select.options.length] = new Option(myName, myValue); 

Answer 2

Вот наивный подход с JQuery. Учитывая этот HTML:

<div> 
    Speaker1: <input class="speaker" type="text" name="speaker1" /><br/> 
    Speaker2: <input class="speaker" type="text" name="speaker2" /><br/> 
    Speaker3: <input class="speaker" type="text" name="speaker3" /><br/> 

    <select class="speaker-list"></select> 
</div> 

и это JQuery код:

$(function() { 
    $('input.speaker').blur(function() { 
     var values = $('input.speaker').filter(function(){ // discard fields with no value 
       return this.value != ''; 
     }).map(function() { 
       return $(this).val();  // return the value 
     }).get();       // get the values 

     var $list = $('.speaker-list').empty(); 
     for(var i in values) { 
      $('<option />').text(values[i]).appendTo($list); // build and add options 
     } 
    }); 
}); 

обновляет список доступных колонок в любое поле ввода текста один фокус страшно потерять.

Вы найдете рабочий пример здесь: http://jsbin.com/ariti4/2

Это должно дать вам хороший старт.

Ссылка: .filter(), .map(),. get(), .html()