动态多选和动态值

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()

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