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

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（）

如果我找到了，我会环顾四周并更新答案。

动态多重选择＆amp;动态值

2 个答案: