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

Question

我正在尝试 select 存储或验证下拉列表中的多个项目，但我不知道该怎么做。让我解释一下我想做什么...... 我将食品质量列入 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。

瞧！现在该怎么办？！

我需要 select 其中一些，并从这些 selected 项目中，使用上面显示的列表中的数字来遵循我的数学运算，例如 Glc 总和、Lip 总和等。

我不知道我是否足够清楚，但假设我选择了食物 1 和食物 3，然后因为我正在选择它们，所以 return 稍后，当需要时：食物 1 的 Glc + 食物 3 的 Glc ; food1 的边缘 + food3 的边缘等 - 如果 3 个元素被 selected，那么与 3 个元素的过程相同。 我不知道如何编写代码 以及使用哪种技术是否要使用其他 json，selected 元素的数组来做到这一点。 ..?

Answer 1

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

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

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

Answer 2

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

使用数组索引。
将您的数据转换为以名称为关键字的对象并从中查找。
将数据转换为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 的数组，其中包含所有选定选项的数据。您应该能够对此进行调整以满足您的需要。

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

how to store items from a json dropdown list

javascript

arrays

json

stored-procedures

dropdown