javascript - 关于第二次追加后添加逗号等问题

Question

你能看一下this demo吗？并让我知道如何添加逗号而不是第一个附加。

我有一个像这样的 HTML

<select id="selectBox" class="sel">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>

<select id="selectBox" class="sel">
    <option>option 4</option>
    <option>option 5</option>
    <option>option 6</option>
</select>

<select id="selectBox" class="sel">
    <option>option 7</option>
    <option>option 8</option>
    <option>option 9</option>
</select>


<input id="copyBtn" type="button" value="copy" />

<textarea id="output">

</textarea>

在 Js 中我拥有的是:

$(".sel").on("change", function(){
    var selected = $(this).val();
    $("#output").append(", " + selected);
});

但是正如您所看到的，附加在所有选择之前应用逗号，甚至是第一个选择!

Answer 1

您可以在添加之前检查是否存在任何值，

var $op = $("#output")
$(".sel").on("change", function () {
    var selected = $(this).val(),
        op = $op.val().trim();
    $op.val((op ? op + ", " : '') + selected);
});

演示:Fiddle