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

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

Вот наивный подход с 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()

Answer 2

Это должно помочь вам

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

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