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

Question

我在尝试完成此操作时遇到了麻烦。无论我从名为 programs_dropdown 的下拉列表中选择什么选项，我都想添加到名为 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不是一个函数

Answer 1

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

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

然后它就会开始工作。

Demo

编辑:

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

DEMO