動的複数選択と動的値

Question

私は以下のHTMLをループして合計に集計したいという問題があります。それは働いている。それが選択されているよう

• 出力すぐ として対応するラベルと一緒に選択した各オプションとそれぞれの選択ボックスで選択した各 オプションの値を保存します。

  は、しかし、私もできるようにしたいと思います

私は後でそれを使用できるように、選択ボックスごとに対応するラベルと選択されたオプションを取得する方法に問題があります。

例えば： 私は知っているしたいと思います：選択したどのようなオプション

• 選択したオプションの名前何であったか
選択したオプションの値が何であったか
• 何それぞれ選択したオプションに対応するラベルです。

HTML：

<div id = "form"> 
<form id = "test">  
<label>Label 1/label> 
    <select class='pricebox' name='box1' id='box1' onchange='code(1)'> 
     <option value='0'>Choose</option> 
     <option value='100'>100 Text</option> 
     <option value='250'>250 Text</option> 
     <option value='500'>500 Text</option> 
     <option value='1000'>1000 Text</option> 
     <option value='2500'>2500 Text</option> 
    </select> 
    <br /> 
    <label>Label 2/label> 
    <select class='pricebox' name='box2' id='box2' onchange='code(2)'> 
     <option value='0'>Choose</option> 
     <option value='100'>100 Text</option> 
     <option value='250'>250 Text</option> 
     <option value='500'>500 Text</option> 
     <option value='1000'>1000 Text</option> 
     <option value='2500'>2500 Text</option> 
    </select> 
    <br /> 
    <label>Label 3/label> 
    <select class='pricebox' name='box3' id='box3' onchange='code(3)'> 
     <option value='0'>Choose</option> 
     <option value='100'>100 Text</option> 
     <option value='250'>250 Text</option> 
     <option value='500'>500 Text</option> 
     <option value='1000'>1000 Text</option> 
     <option value='2500'>2500 Text</option> 
    </select> 
    <br /> 
    <label>Label 4/label> 
    <select class='pricebox' name='box4' id='box4' onchange='code(4)'> 
     <option value='0'>Choose</option> 
     <option value='100'>100 Text</option> 
     <option value='250'>250 Text</option> 
     <option value='500'>500 Text</option> 
     <option value='1000'>1000 Text</option> 
     <option value='2500'>2500 Text</option> 
    </select> 
    <br /> 
    <label>Label 5/label> 
    <select class='pricebox' name='box5' id='box5' onchange='code(5)'> 
     <option value='0'>Choose</option> 
     <option value='100'>100 Text</option> 
     <option value='250'>250 Text</option> 
     <option value='500'>500 Text</option> 
     <option value='1000'>1000 Text</option> 
     <option value='7000'>7000 Text</option> 
    </select> 
    <br /> 
    <label>Label 6/label> 
    <select class='pricebox' name='box6' id='box6' onchange='code(6)'> 
     <option value='0'>Choose</option> 
     <option value='100'>100 Text</option> 
     <option value='300'>300 Text</option> 
    </select> 
    <br /> 
    <label>Label 7/label> 
    <select class='pricebox' name='box7' id='box7' onchange='code(7)'> 
     <option value='0'>Choose</option> 
     <option value='100'>100 Text</option> 
     <option value='250'>250 Text</option> 
     <option value='500'>500 Text</option> 
    </select> 
    <br /> 
    <label>Label 8/label> 
    <select class='pricebox' name='box8' id='box8' onchange='code(8)'> 
     <option value='0'>Choose</option> 
     <option value='100'>100 Text</option> 
     <option value='250'>250 Text</option> 
     <option value='500'>500 Text</option> 
     <option value='1000'>1000 Text</option> 
     <option value='2500'>2500 Text</option> 
    </select> 
    <br /> 
<p id="demo"></p> 
</form> 
</div> 

JS：私はあなたがこれを使用して、コードの機能を更新することができると思い

function code() { // forget the parameter 
    var elements = document.getElementsByClassName("pricebox"); 
    var names = ''; 
    var datvalue = 0; 
    var i = 0; 
    while(i<elements.length) { 
     names = elements[i].name; 
     elval = parseFloat(elements[i].value); 
     datvalue = datvalue + elval; 
     i++; 
     document.getElementById("demo").innerHTML = "<b>Total: " + datvalue + " SEK</b>"; 
    } 


} 

Answer 1

。

// Code goes here 
var data = {} 

function code() { // forget the parameter 
    var elements = document.getElementsByClassName("pricebox"); 
    var name; 
    var id; 
    var datvalue = 0; 

    Array.prototype.forEach.call(elements, function(item, index) { 
     id = item.id; 
     name = item.name; 
     elval = parseFloat(item.value); 
     datvalue = datvalue + elval; 
     document.getElementById("demo").innerHTML = "<b>Total: " + datvalue + " SEK</b>"; 
     data[id] = { 
     name: name, 
     value: elval 
     }; 
    }); 
} 

グローバルデータ変数を使用してデータにアクセスできます。そして、私が行ったことを見てthis plunkerをチェックすることができます。ところで、私はforEachでコードを更新しました。あなたのforループ内

Answer 2

、これを置く：

var index = elements[i].selectedIndex; 
var options = elements[i].options; 

var value = options[index].value 
var text = options[index].text 

あなたは配列で、テキストを値を格納することができます。私はjavascriptですばらしいわけではないので、どのようにラベルを選択するのかはわかりません。 jqueryで、私はちょうど.parent（）を使用していた可能性があります。prev（）

ここでは、見つけたら答えを見て回ります。