arrays - how to filter Drop down in javascript

Question

I am having

const Fruits = [
{ name: "Apple", code: "1" },
{ name: "Orange", code: "2" },
{ name: "Mango", code: "3" },
{ name: "Derry", code: "4" }

];

const SelectedFruits=[]

if user selects Apple from drop down i need to remove it from Fruits and add it to SelectedFruits like priority wise he can change them please help me and again if user can change the priority.

question from:https://stackoverflow.com/questions/66058275/how-to-filter-drop-down-in-javascript

Answer 1

Hope this is what you are looking for !!

const Fruits = [
{ name: "Apple", code: "1" },
{ name: "Orange", code: "2" },
{ name: "Mango", code: "3" },
{ name: "Derry", code: "4" }
];

const fruitsSel = document.querySelector('#fruits');

Fruits.forEach(function(item, index, array) {
   var opt = document.createElement("option");
   opt.text = item.name;
   opt.value = item.code;
   fruitsSel.add(opt);
});

const SelectedFruits=[];
const remainingFruits = [];
fruitsSel.addEventListener('change',(e)=>{
        const val = e.target.value;
    const selectedFruit = Fruits.filter(fruit=>fruit.code===val);
    SelectedFruits.push(...selectedFruit);
    const remFruits = Fruits.filter(fruit=>fruit.code!==val);
    remainingFruits.push(...remFruits);
    console.log({'selected fruit' : selectedFruit})
    console.log({'remaining fruits' : remFruits})
})

<select id='fruits'>
  
</select>