如何存储json下拉列表中的项目答案

【问题标题】：how to store items from a json dropdown list如何存储json下拉列表中的项目
【发布时间】：2021-04-12 19:31:30
【问题描述】：

我正在尝试从下拉列表中选择商店或验证多个项目，但我不知道该怎么做。让我解释一下我想要做什么...... 我将食品质量放入 json 列表中

   <select id="locality-dropdown" name="locality" multiple="multiple" size="2">
    </select>

<script>
    var Food = //4 elements json format 
        [
           {
              "name": "food1",
              "Glc": 2,
              "Lip": 0.2,
              "Prot": 0.5,
              "IG": 20
            },
           {
              "name": "food2",
               "Glc": 4,
              "Lip": 1.2,
              "Prot": 0.7,
              "IG": 40
           },
           {
              "name": "food3",
              "Glc": 5,
              "Lip": 0.32,
              "Prot": 0.76,
              "IG": 60
           },
           {
              "name": "food4",
               "Glc": 7.5,
              "Lip": 1.5,
              "Prot": 1.3,
              "IG": 80
           }       
        ];

然后我把这个列表放在一个下拉格式中：

    let dropdown = document.getElementById('locality-dropdown');
    dropdown.length = 0;
    let defaultOption = document.createElement('option');
    defaultOption.text = 'Choose Food';
    
    dropdown.add(defaultOption);
    dropdown.selectedIndex = 0;
    
        let option;
        for (let i = 0; i<Food.length; i++) {
          option = document.createElement('option');
          option.text = Food[i].name;
          option.value0 = Food[i].Glc;
          option.value1 = Food[i].Lip;
          option.value2 = Food[i].Prot;
          option.value3 = Food[i].IG;
          console.log(option.value0,option.value1,option.value2,option.value3)
          dropdown.add(option);}
</script>

那时我有一个不错的下拉列表框，里面有 food1 、 food2 、 food3 、 food4 。

瞧！现在该怎么办？！

我需要选择其中的一些，然后从这些选定的项目中，使用上面显示的列表中的数字来跟随我的数学运算，例如 Glc 的总和、Lip 的总和等。

我不知道我是否足够清楚，但是假设我选择了 food1 和 food3，那么因为我正在选择它们，所以稍后会在需要时返回：food1 的 Glc + food3 的 Glc ； food1 的唇 + food3 的唇等 - 如果选择了 3 个元素，则使用 3 个元素进行相同的处理。 我不知道如何编写代码以及使用哪种技术是否是其他 json 、所选元素的数组...？

【问题讨论】：

我想你会想要在select 元素的onchange 事件中添加一个eventListener。然后在您的事件侦听器回调函数中显示值，此 SO 帖子可能会为您提供所需的 - (stackoverflow.com/questions/30372235/…)

标签： javascript arrays json stored-procedures dropdown

【解决方案1】：

关于如何在选项值属性中存储与列表元素对应的单个数据元素，您有几个选择。

使用数组索引。
将您的数据转换为以名称为关键字的对象并从中查找。
将数据转换为json并存储在value属性中。注意：此方法意味着如果您在构建下拉列表后更新了 Food 数组，那么您将不会在选项 value 属性中看到更新。如果需要更新个别属性，请勿使用此方法。

这里我已经使用 json 完成了。将其更改为其他两个是微不足道的。

<html>
    <body>
        <select id="locality-dropdown" name="locality" multiple="multiple">
        </select>
        <button id="locality-but">Submit</button>
    </body>

<script>
    "use strict"
    const Food = [{
          "name": "food1",
          "Glc": 2,
          "Lip": 0.2,
          "Prot": 0.5,
          "IG": 20
        }, {
          "name": "food2",
           "Glc": 4,
          "Lip": 1.2,
          "Prot": 0.7,
          "IG": 40
       }, {
          "name": "food3",
          "Glc": 5,
          "Lip": 0.32,
          "Prot": 0.76,
          "IG": 60
       }, {
          "name": "food4",
          "Glc": 7.5,
          "Lip": 1.5,
          "Prot": 1.3,
          "IG": 80
       }       
    ];

    const dropdown = document.getElementById('locality-dropdown');
    const defaultOption = document.createElement('option');
    defaultOption.text = 'Choose Food';
    defaultOption.disabled = true;
    
    dropdown.add(defaultOption);
    dropdown.selectedIndex = 0;
    
    document.getElementById('locality-but').addEventListener('click', (event) => {
        console.log('click');
        const dd = document.getElementById('locality-dropdown');
        const result = [];
        for(let i = 0; i < dd.options.length; i++) {
            const option = dd.options[i];
            
            if(option.selected) {
                result.push(JSON.parse(option.value));
            }            
        }
        console.log("do something with \n", result);
    })
    
    for (let food of Food) {
        const option = document.createElement('option');
        option.text = food.name;
        option.value = JSON.stringify(food);
        dropdown.add(option);
    }
</script>
    
</html>

在事件侦听器的末尾，您有一个名为 result 的数组，其中包含所有选定选项的数据。您应该能够对其进行调整以满足您的需求。

【讨论】：

就是这样...谢谢！这非常接近我想做的事情，但我有一个哲学上的时间/动态问题。在您的解决方案中，似乎当我整合第一个选项时，我的数学将立即开始，但我希望首先拥有我选择的所有项目，然后开始我的数学；换句话说，验证我选择了什么......就像点击一个按钮说我对我选择的东西（1.2. 3 或 4 个元素）或复选框或两者都满意......
好极了……完美！会很棒，但我不想坚持......如果你能告诉我如何将此下拉列表转换为下拉复选框。我查看了 Endothermic_Dragon 的链接，但它看起来很复杂，并且不适合您为我编写的代码。而这并不像''那么简单
这有点复杂。它显然不是标准组件，因此它涉及更多代码。您应该查看 bootstrap css 以查看是否符合要求。我发现this 看起来很简单。
glurps ...不适合我....我问这个问题是因为我使用phonegap将js代码放在手机上。问题是没有像电脑一样的 ctrl+click 来选择多个。所以我想到了一个复选框，但如果你有其他想法，欢迎。
毫无疑问，我们将为移动网络建立处理此问题的技术。听起来你对 js 或 css 不太了解，所以最好的办法是使用 bootstrap 之类的库来为你提供现成的组件。

【解决方案2】：

尝试制作复选框列表而不是下拉列表：

var Food = //4 elements json format 
  [{
      "name": "food1",
      "Glc": 2,
      "Lip": 0.2,
      "Prot": 0.5,
      "IG": 20
    },
    {
      "name": "food2",
      "Glc": 4,
      "Lip": 1.2,
      "Prot": 0.7,
      "IG": 40
    },
    {
      "name": "food3",
      "Glc": 5,
      "Lip": 0.32,
      "Prot": 0.76,
      "IG": 60
    },
    {
      "name": "food4",
      "Glc": 7.5,
      "Lip": 1.5,
      "Prot": 1.3,
      "IG": 80
    }
  ];
for (var i=0;i<Food.length;i++){
CurrentFood=Food[i]
var input=document.createElement("input")
input.type="checkbox"
input.id=CurrentFood.name
var label=document.createElement("label")
label.for=CurrentFood.name
label.innerText=CurrentFood.name
document.body.appendChild(input)
document.body.appendChild(label)
document.body.appendChild(document.createElement("br"))
}

之后，将事件侦听器附加到每个复选框以侦听“更改”事件。 Checkbox Check Event Listener 之后，每当事件触发时，从被检查的那些的父级中找到索引，从列表中获取索引数组，并返回Food[index].Glc 或Food[index].Lip，或者任何你想要的。

【讨论】：

@Endothermic_Dragon 如果可能的话，我更喜欢复选框下拉菜单+如果可能的话，你能给我看看你说的代码（我现在很简单，但对我来说很难概念化）你的代码说，这听起来很有趣。
“复选框下拉菜单”是指这样的意思吗？ stackoverflow.com/questions/19206919/…
谢谢，我真的很想使用检查列表下拉菜单，但它还必须与 Paul Rooney 写给我的代码兼容……我不确定我自己能不能做到；但我觉得它不应该那么难，尽管你给我的链接，我不清楚