動態多項選擇和動態值

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

然后，您可以使用全局數據變量來訪問數據。 您也可以檢查一下這個pl子 ，看看我做了什么。 順便說一下，我已經用forEach更新了代碼。

Answer 2

在您的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（）

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