How to dynamically populate a dropdown from a text box

Question

I have a form where the user has to enter a list of choices into a series of text boxes: for example:

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

Based on what the user enters here, another drop down has to be populated on the same page The data entered here is not stored in the database YET.

The other drop-down is something like:

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

Any thoughts? I'm working with Javascript and PHP.

Thanks!

Answer 1

This should get you on your way

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

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

Answer 2

Here is a naive approach with jQuery. Given this 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>

and this jQuery code:

$(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
        }
    });
});

it updates the list of available speakers anytime one text input field looses focus.

You find a working example here: http://jsbin.com/ariti4/2

This should give you a good start.

Reference: .filter(), .map(), .get(), .html()