Question

我有一个标识为CMD ./bootstrap.sh的大下拉列表。选择一个选项并单击inventory按钮后，应保存选项的名称，以及其数量。可以添加多个选项，以创建列表。

现在的主要问题是，当我按下Añadir按钮时，它会复制其名称和数量，但不仅仅是一次，它会复制与所选数量相同的次数。它应该只复制一次：如果我选择“ABB逆变器（PVI 3.6）”并且其“Cantidad”为2，它应该与“ABB逆变器（PVI 3.6）”和“2”

恰好出现一行

Añadir

Answer 1

问题

我们希望能够通过点击list A来复制/选择从list B到Button的选项，并且可以添加多次相同的选项 （即通过指定要复制的项目的 Quantity ），同时显示添加到Total的{{1}}项。

我们需要什么

列表A：可供选择的List B，上面有一些选项。
数量 select定义数量（即我们要添加的当前所选选项的副本数量）。
按钮：input[number]将元素从一个列表复制到另一个列表。
列表B：某种button来显示复制/选定的选项（即它可以是任何内容，从list到{{1 } div和select属性）。
总计：显示复制/选定项目总数的内容（即可以是multiple到readonly div的任何内容}）。

我们有什么

列表A： input[number]，其ID为readonly
数量：标识为select的{{1}}
按钮：inventory，其ID为input
列表B cantidad，其ID为button
总计 anadir标识为select

如何解决

我们开始创建一个功能，将项目从equipos复制到input，我们称之为quantity，注意我们是如何引用所有DOM元素的我们需要：

List A

现在我们需要从List B （即我们的anadirEquipo变量中引用的）获取所选的选项，然后获取function anadirEquipo () { var inventory = document.getElementById('inventory'), // List A cantidad = document.getElementById('cantidad'), // Quantity equipos = document.getElementById('equipos'); // List B total = document.getElementById('quantity') // Total // TODO: copy selected itens from ´inventory´ to ´equipos´ }＆＃39 ; s值（出现在我们的List A元素中），我们可以这样做：

inventory

我们已经拥有了所需的一切，现在我们应该验证Quantity上是否有选定的项目。由于在cantidad我们已经有一个默认项，其值为// get the selected option from 'List A' var selected = inventory.options[inventory.selectedIndex]; // get the .value from cantidad as number, or 1 if there is no .value var quantity = +cantidad.value || 1;来表示空选择，我们应该检查当前所选项的值是否为{{ 1}}，如果不是，那么我们可以将List A值增加List A项：

最后，我们只需要将所选项目从0复制到Total的次数与Quantity一样多，为实现这一目标，我们将减少 // validade if the selected item is not the default item if (+selected.value !== 0) { // increment Total itens in 'List B' by 'quantity' total.value = total.value + quantity; /** * TODO: loop through 'List A' and copy the * selected item, 'Quantity' times **/ } List A List B直至其Quantity，并且在每次递减中，我们都会创建所选项目的副本并将其附加到Quantity：

-1

最后，我们将有这样的功能：

最后，我们还可以创建一个List B函数，只需选择它们并调用函数即可从var choice; while (quantity-- > 0) { // create a copy from the selected item choice = document.createElement('option'); choice.text = selected.text; choice.value = selected.value; // append the copy to 'List B' equipos.add(choice); }中删除不需要的项目。您可以在下面的代码段中看到它的示例。

最终解决方案

＆＃13;

function anadirEquipo () {
    var inventory = document.getElementById('inventory'), // List A
        cantidad = document.getElementById('cantidad'), // Quantity
        equipos = document.getElementById('equipos'), // List B
        total = document.getElementById('quantity'), // Total
        choice;

    // get the selected option from 'List A'
    var selected = inventory.options[inventory.selectedIndex];

    // get the .value from cantidad as number, or 1 if there is no .value
    var quantity = +cantidad.value || 1; 

    // validade if the selected item is not the default item
    if (+selected.value !== 0) {

        // increment Total itens from 'List B' by 'quantity'
        total.value = total.value + quantity; 

        while (quantity-- > 0) {
            // create a copy from the selected item
            choice = document.createElement('option');
            choice.text = selected.text;
            choice.value = selected.value;

            // append the copy to 'List B'
            equipos.add(choice);
        }
    }
}

＆＃13;

retirarEquipos

＆＃13;

List B

＆＃13;

从下拉列表中添加选择

1 个答案: