動態多選和動態值

我有一個問題，我希望下面的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>"; 
    } 


}

來源

2016-07-05 user3657366

我認爲你可以更新與此代碼的功能;

// 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更新了代碼。

來源

2016-07-05 21:39:35

內，您的for循環，把這個：

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

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

您可以存儲文本的價值，在數組中。我對JavaScript不太瞭解，所以不確定你會如何選擇標籤。在jQuery中，我可以剛剛使用.parent（）。prev（）

我會環顧四周，並更新答案，如果我找到如何。

來源

2016-07-05 21:46:41 AmN

動態多選和動態值

回答

相關問題