第二次追加后添加逗号的问题等等

Issue on Adding Comma After Second Append and so on

本文关键字：问题 追加 添加 第二次      更新时间：2023-09-26

你能看看这个演示吗，让我知道我如何添加逗号，而不是第一个追加。

我有一个像这样的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);
});

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

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

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

演示：Fiddle

这里有一个解决方案：

$(".sel").on("change", function(){
    var selected = [];
    $(".sel").each(function() {
        selected.push($(this).val());
    });
    $("#output").val(selected.join(", "));
});

请检查更新的JSFiddle

检查文本区域val()是否添加第一个元素

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

或者一种更容易维护删除的方法：拥有一个数组并使用join()

var selectedItems = [];
$(".sel").on("change", function(){
    var selected = $(this).val();
    if(selectedItems.indexOf(selected) >= 0){
         selectedItems.push(selected);
    }
    $("#output").append(selectedItems.join(', '));
});

这可能是一个解决方案，而不是在所有".sel"上绑定更改，先在".sel"上循环，然后在它们每个上绑定更改。但要获取每个".seel"的索引，如果它是0（第一个元素），则更改不包括逗号的文本。

这是最新的小提琴。

$(".sel").each(function(index) {
    $(this).on("change", function(){
        var selected = $(this).val();
        var appendText = index == 0 ? selected : (", " + selected);
        $("#output").append(appendText);
    });
});

请注意，我没有更改您原始代码中的任何逻辑，而是专注于您努力修复/实现的特定行为。

相关文章：