Question

我如何添加产品，但当我再次选择同一产品时，会显示已添加产品的消息？然后，将所有产品添加到隐藏的输入中，如下所示：＆＃34; [product] [0]＆＃34;。

简单的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");
    }
});

Answer 1

我会创建一个selectedProducts数组，然后使用jQuery's inArray function检查新选择的产品是否已经在该数组中。

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

另外，我从名称$，list和quant中删除了带前缀的remove。它们不是jQuery对象，许多开发人员会发现这令人困惑。此外，还增加了两个项目，但是Rufism解决了这个问题。

哦，如果有必要，请务必从阵列中删除该项目。

Answer 2

正在制作您正在添加的任何选项的两个副本，因为您没有结束标记。因此，当您选择表格时

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

你有两个要追加的元素。只需改变

<tbody>

<tbody>

要

</tbody>

不要再在桌面上添加相同的产品

2 个答案: