如何从文本框中动态填充下拉列表

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()