從下拉列表中選擇

Question

我有一個很大的下拉列表，其ID爲inventory。一旦我選擇一個選項並點擊Añadir按鈕，該選項的名稱應該被保存，以及它的數量。它可以添加多個選項，以創建一個列表。

現在的主要問題是，當我按下Añadir按鈕時，它會複製其名稱和數量，但不僅僅是一次，它會複製與其所選數量相同的次數。它應該只是複製一次：如果我選擇「ABB變頻器（PVI 3.6）」和它的「Cantidad」爲2，它應該會出現只有一個符合「ABB變頻器（PVI 3.6）」和「2」

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<!-- CSS --> 
<style type="text/css"> 
/* general */ 
*, .border-box { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

/* tr.output */ 
tr.output { 
    vertical-align: top; 
} 

tr.output > td > * { 
    width: 100%; 
} 
</style> 

<!-- HTML --> 
<form name="InventoryUp"> 
<table> 
    <tr> 
     <td colspan="2" align="center" bgcolor="#97d700"> 
      <h2>Equipo(s) a ser utilizados</h2> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" bgcolor="#D4D4D4"></td> 
     <td align="center" bgcolor="#D4D4D4"><b><em>Cantidad (#)</em></b> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" bgcolor="#D4D4D4"> 
      <select id="inventory" size="1"> 
       <option id="0">Seleccione un equipo</option> 
       <option id="abbi5000">ABB Inverter(5000)</option> 
       <option id="abbiPVI3.6">ABB Inverter(PVI 3.6)</option> 
       <option id="abbiPVI4.2">ABB Inverter(PVI 4.2)</option> 
       <option id="bGE20">Breakers(GE 20 AMP)</option> 

       <!-- Many more options... --> 
      </select> 
     </td> 
     <td align="center" bgcolor="#D4D4D4"> 
      <input type="number" id="cantidad" placeholder="Ex: 5" size="1"> 
     </td> 
    </tr> 
    <tr class="actions"> 
     <td colspan="2" align="center" bgcolor="#D4D4D4"> 
      <!-- Añadir --> 
      <input type="button" id="anadir" onclick="anadirEquipo()" value="Añadir" /> 

      <!-- Retirar --> 
      <input type="button" id="retirar" onclick="retirarEquipos()" value="Retirar" /> 
     </td> 
    </tr> 
    <tr> 
     <th align="center" bgcolor="#2AD2C9"> 
      <h4>Equipo(s) añadido(s):</h4> 
     </th> 
     <th align="center" bgcolor="#2AD2C9"> 
      <h4>Total:</h4> 
     </th> 
    </tr> 
    <tr class="output"> 
     <td> 
      <select type="text" id="equipos" multiple readonly> 
      </select> 
     </td> 
     <td> 
      <input type="number" id="quantity" value="0" readonly /> 
     </td> 
    </tr> 
</table> 
</form> 

<!-- JavaScript --> 
<script type="text/javascript"> 
// vars 
var pageLoaded = false, 
    model = null; 

// functions 
function anadirEquipo() { 
    var cantidad = +document.getElementById('cantidad').value || 1, 
     selected = model.inventory.options[model.inventory.selectedIndex], 
     choice; 

    if (pageLoaded) { 
     if (+selected.value !== 0) { 
      model.quantity.value = +model.quantity.value + cantidad; 

      while (cantidad-- > 0) { 
       choice = document.createElement('option'); 
       choice.text = selected.text; 
       choice.value = selected.value; 

       model.equipos.add(choice); 
      } 
     } 
    } 
} 

function retirarEquipos() { 
    var options = model.equipos.options, 
     i; 

    if (pageLoaded) { 
     for (i = 0; i < options.length; i) { 
      if (options[i].selected) { 
       model.equipos.remove(options[i]); 
       model.quantity.value--; 

      } else { 
       i++; 
      } 
     } 
    } 
} 

// init 
window.onload = function() { 
    model = { 
     inventory: document.getElementById('inventory'), 
     equipos: document.getElementById('equipos'), 
     quantity: document.getElementById('quantity') 
    }; 

    pageLoaded = true; 
}; 
</script> 

Answer 1

的問題

我們希望能夠從list A複製/選擇選項爲list B，通過點擊Button，與添加幾次相同的選項的可能性（通過指定Quantity，即的項目複製），也顯示Total的項目已添加到List B。

我們需要什麼

• 列表A：一個select從選擇，使用它的一些選項。
• 數量：一個input[number]定義數量（即我們要添加的當前選定選項的副本數量）。
• 按鈕： A button將元素從一個列表複製到另一個列表。
• 表B：某種list以顯示覆制/選擇的選項（即它可以是任何東西，從div到selectmultiple與和readonly屬性）。
• 總計：東西來顯示總複製/選擇的項目的（即它可以是從任何div到input[number]與readonly屬性）。

我們有什麼

• 列表A：一個select id爲inventory
• 數量：的input id爲cantidad
• 按鈕：一button，編號爲anadir
• B組：一個select id爲equipos
• 總：的input id爲quantity

如何解決

我們開始創建一個函數將項目從List A複製到List B，在我們的案例中我們稱之爲anadirEquipo，注意ho W¯¯我們已經提到，我們會需要的所有DOM元素：

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´ 
} 

現在，我們需要從獲得所選擇的選項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; 

我們已經擁有我們需要的，我們現在應該驗證一切，如果有上所選項目。由於我們的List A我們已經有了一個默認項與0一個值來表示一個空的選擇，我們應該檢查一下我們的當前選擇項的值是0，如果不是的話，那麼我們可以通過Quantity增加我們的Total值項目：

// 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直到其0 ，並在每個遞減，我們將創建所選項目的副本，並追加它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); 
} 

最後，我們有這樣的功能：

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

在最後，我們還可以創建一個retirarEquipos函數，只需選擇它們並調用該函數即可從List B中刪除不需要的項目。你可以在下面的代碼片段中看到它的一個例子。

最終解決

// vars 
 
var pageLoaded = false, 
 
    model = null; 
 

 
// functions 
 
function anadirEquipo() { 
 
    var cantidad = +document.getElementById('cantidad').value || 1, 
 
     selected = model.inventory.options[model.inventory.selectedIndex], 
 
     choice; 
 
    
 
    if (pageLoaded) { 
 
     if (+selected.value !== 0) { 
 
      model.quantity.value = +model.quantity.value + cantidad; 
 

 
      while (cantidad-- > 0) { 
 
       choice = document.createElement('option'); 
 
       choice.text = selected.text; 
 
       choice.value = selected.value; 
 

 
       model.equipos.add(choice); 
 
      } 
 
     } 
 
    } 
 
} 
 

 
function retirarEquipos() { 
 
    var options = model.equipos.options, 
 
     i; 
 
     
 
    if (pageLoaded) { 
 
     for (i = 0; i < options.length; i) { 
 
      if (options[i].selected) { 
 
       model.equipos.remove(options[i]); 
 
       model.quantity.value--; 
 
      
 
      } else { 
 
       i++; 
 
      } 
 
     } 
 
    } 
 
} 
 

 
// init 
 
window.onload = function() { 
 
    model = { 
 
     inventory: document.getElementById('inventory'), 
 
     equipos: document.getElementById('equipos'), 
 
     quantity: document.getElementById('quantity') 
 
    }; 
 
    
 
    pageLoaded = true; 
 
};

/* general */ 
 
*, .border-box { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
/* tr.output */ 
 
tr.output { 
 
    vertical-align: top; 
 
} 
 

 
tr.output > td > * { 
 
    width: 100%; 
 
}

<table> 
 
<tr class="input"> 
 
    <td align="center" bgcolor="#D4D4D4"> 
 
     <select id="inventory" size="1"> 
 
     <option id="0" value="0">Seleccione un equipo</option> 
 
     <option id="bm260W" value="8060">Boviet Module(260W)</option> 
 
     <option id="bm300W/305W/310W" value="156">Boviet Module(300/305/310W)</option> 
 
     </select> 
 
    </td> 
 
    <td align="center" bgcolor="#D4D4D4"> 
 
     <input type="number" id="cantidad" placeholder="Ex: 5" size="1"> 
 
    </td> 
 
</tr> 
 
<tr class="actions"> 
 
    <td colspan="2" align="center" bgcolor="#D4D4D4"> 
 
     <!-- Añadir --> 
 
     <button type="button" id="anadir" onclick="anadirEquipo()">Añadir</button> 
 
     
 
     <!-- Retirar --> 
 
     <button type="button" id="retirar" onclick="retirarEquipos()">Retirar</button> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <th align="center" bgcolor="#2AD2C9"> 
 
     <h4>Equipo(s) añadido(s):</h2> 
 
    </th> 
 
    <th align="center" bgcolor="#2AD2C9"> 
 
     <h4>Total:</h2> 
 
    </th> 
 
</tr> 
 
<tr class="output"> 
 
    <td> 
 
     <select id="equipos" multiple readonly> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="quantity" value="0" readonly /> 
 
    </td> 
 
</tr>