Javascript 不再在表上添加相同的产品

如何添加产品，但当我再次选择同一产品时，显示已添加产品的消息？然后，将输入中的所有产品添加为隐藏值，如：[product][0]

我的第一个剧本

简单HTML：

<select id="lista_produtos">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option>option 4</option>
    <option>option 5</option>
</select>
<input type="number" id="quant_produtos">
<button id="add_produto">ADD</button>
<br>
<br>
<br>
<br>
<table border="1" width="100%" id="cesta_produtos">
    <thead>
        <tr>
            <td>product</td>
            <td>quant</td>
            <td>remove</td>
        </tr>
    </thead>
    <tbody>

    <tbody>
</table>

Javascript:

$('#add_produto').on('click', function () {

    var $table = $('#cesta_produtos tbody'), // Products table
        $list = $('#lista_produtos').val(), // Select list
        $quant = $('#quant_produtos').val(), // Quant field
        $remove = "<a href='#' class='del_produto'>x</a>"; // Link to remove the product

    // Insert the selected product on the table
    $table.append("<tr><td>" + $list + "</td><td>" + $quant + "</td><td>" + $remove + "</td></tr>");

});

// Remove the product from table
$(document).on('click', '.del_produto', function (e) {
    e.preventDefault();

    var dialog = confirm("Are you sure you want remove this product?");

    if (dialog == true) {
        $(this).closest('tr').remove();
    } else {
        console.log("produto removido");
    }
});

---

由于没有结束标记，正在生成两份您正在添加的任何选项的副本。因此，当您选择表时

$table  = $('#cesta_produtos, tbody'), // Products table

您将获得两个要附加到的元素。换衣服

<tbody>

<tbody>

到

我将创建一个selectedProducts数组，然后使用检查新选择的产品是否已经在该数组中

此外，我还从名称列表、quant和remove中删除了前缀$。它们不是jQuery对象，许多开发人员会感到困惑。此外，增加了两个项目，但联阵解决了这个问题

---

哦，如果有必要，一定要从数组中删除该项。

不是答案，但您的语法有点马虎；第二个应该是在你的JFiddle中引起一个bug的。我明白了，我最初的消息来源是正确的，只是在fiddle中我已经在评论中提到了这一点；这根本不能回答他的问题。我的原始来源是正确的，只是在小提琴中。在这种情况下，您还需要添加到selectedProduct，而不是将其附加到html tiwh a selectedProducts.pushlist；或者，您希望在所选产品中存储的任何值，以区分产品之间的差异，我的朋友？

</tbody>

var selectedProducts = [];

$('#add_produto').on('click', function () {
    var $table = $('#cesta_produtos tbody'), // Products table
        list = $('#lista_produtos').val(), // Select list
        quant = $('#quant_produtos').val(), // Quant field
        remove = "<a href='#' class='del_produto'>x</a>"; // Link to remove the product

    if ($.inArray(list, selectedProducts)) {
        console.log(list + ' was already selected');
        return;
    } else {
        // Insert the selected product on the table
        $table.append("<tr><td>" + list + "</td><td>" + quant + "</td><td>" + remove + "</td></tr>");
        selectedProducts.push(list);
    }
});