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

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

2 个答案: