リストにドロップダウンリストから選択項目を追加

Question

私はIDがinventoryの大きなドロップダウンリストを持っています。オプションを選択してAñadirボタンをクリックすると、オプションの名前をその数量だけ保存する必要があります。リストを作成するために、1つ以上のオプションを追加することができます。

ボタンを押すと、その名前と数量がコピーされますが、1回だけでなく、選択した数量と同じ回数がコピーされます。それは一度だけコピーしてください：私は「ABBインバーター（PVI 3.6）」とその「Cantidad」を選択した場合、それは「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

で正確に一つの行を表示されます、2です

問題

我々は数回同じオプションを追加する可能性と、Buttonをクリックすることで、list Bへlist Aから/オプションの選択をコピーすることができるようにしたい（Quantityを指定することによって、すなわちコピーする商品の数）、アイテムのうちがList Bに追加されました。その上にいくつかのオプションを使用して、から選択することがselect：

は、我々は

• リストAを何が必要です。
• 数量：（つまり、現在選択しているオプションのコピー数を指定します）を指定すると、input[number]となります。
• ボタン：buttonリストの要素を別のリストにコピーします。
• リストB：コピー/選択したオプション（divからmultipleとselectとreadonly属性に、それは何もすることができますすなわち）を表示するlistのいくつかの並べ替え。
• 合計：コピー/選択した項目の合計を表示する何かを（すなわち、それはreadonly属性を持つinput[number]からdivから何もすることができます）。

我々は何をすべきか

• リストA： IDを持つselectinventory
• 数量： IDを持つinputcantidad
• ボタン： Aの
• リストB：equipos
• 合計idのselect：IDを持つinputが

quantity 我々はに関数を作成するために開始

解決する方法List AからList Bにコピーします。私たちの場合はanadirEquipoと書いてあります。我々はすでに我々が必要をつもり全てのDOM要素を参照しているW：

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 
    **/ 
} 

最後に、我々は唯一の私たちはその0まで-1によってデクリメントQuantityをつもり、それを達成するために、List AからList BにQuantityのような回数を選択した項目をコピーする必要があります、および各デクリメントで、我々は選択したアイテムのコピーを作成しますとList Bにそれを追加します。で

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

：最後に

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

を、私たちはこのような機能を持っていますまたList Bから不要なアイテムを選択してその関数を呼び出すだけで、retirarEquiposという関数を作成することもできます。スニペットでその例を見ることができます。

最終解決

// 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>