I am trying to select store or validate multiple items from a dropdown list but I don't how to do it. let me explain what I am trying to do... I have food quality into a json list
<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
}
];
then I put this list in a dropdown format :
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>
At that point I have a nice dropdown list box with food1 , food2, food3, food4 inside.
voila! and now what to do ?!
I need to select some of them and from these selected items, use the numbers of the list shown above to follow my math such as sum of Glc, sum of Lip etc.
I don't know if I am clear enough but let say I choose food1 and food3, then because I am choosing them, it will return later, when needed : Glc of food1 + Glc of food3 ; Lip of food1 + Lip of food3 etc - if 3 elements are selected so the same process with 3 elements. I don't know how to write the code and which technic to use whether an other json , an array of the the selected elements to do so...?
You have a few options with regard to how you can store the individual data elements corresponding to the list elements in the options value attribute.
Food array after the dropdown was built, then you wouldn't see the updates in the options value attributes. If it needs to update individual properties, don't use this method.Here I've done it using json. Its trivial to change it to the other two.
<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>
At the end of the event listener you have an array called result which has the data for all selected options. You should be able to adapt this to fit your needs.