Jquery 将下拉列表中的值添加到文本输入

Question

我在尝试完成此操作时遇到了麻烦。无论从名为programs_dropdown的下拉列表中选择select，我都想将其添加到名为programs_input的文本字段中，并用逗号分隔选项值。

例如php, jquery, html

在下拉列表下方，我有一个add div。 单击时，它应该将我从下拉列表中选择的内容添加到文本字段中。

$(document).ready(function(){
    $('#add').click(function() {
        var programs = $("#programs_dropdown").val(); //get value of selected option
        $('#programs_input').val(programs.join(',')); //add to text input
    }); 
});

HTML

<select name="programs_dropdown" id="programs_dropdown">
<option value="php">php</option>
<option value="jquery">jquery</option>
<option value="html" selected="selected">HTML</option>
</select>

<div id=add">Add</div>

<input type="text" name="programs_input" id="programs_input" />

我得到了skill.join is not a function

Answer 1

如果您想要 select 多个，则 select 必须选择多个。 将其更改为

<select name="programs_dropdown" id="programs_dropdown" multiple>

然后它将开始工作。

演示

编辑：

$(document).ready(function(){
    $('#add').click(function() {
        var program = $("#programs_dropdown").val(); //get value of selected option
        var programs = $('#programs_input').val().split(",");
        if (programs[0] == "") {
            programs.pop()
        }

        if ($.inArray(program, programs) == -1) {
            programs.push(program);
        }

        $('#programs_input').val(programs.join(',')); //add to text input
    });
});

演示

Answer 2

我认为这就是您需要的演示