Change value in array of objects on dropdown unselect

Question

I want to change the values in my array of objects based on select from the dropdown.

arr= [
        {name: 'one', in_order: true, other_key:'ga'},
        {name: 'one', in_order: true, other_key:'gb'},
        {name: 'one', in_order: true, other_key:'gc'},
        {name: 'two', in_order: false, other_key:'gd'},
        {name: 'two', in_order: false, other_key:'ge'},
        {name: 'two', in_order: false, other_key:'gf'},
        {name: 'three', in_order: false, other_key:'gg'},
        {name: 'three', in_order: false, other_key:'gh'},
        {name: 'three', in_order: false, other_key:'gi'},
        {name: 'four', in_order: false, other_key:'gj'},
        {name: 'four', in_order: false, other_key:'gk'},
        {name: 'four', in_order: false, other_key:'gl'}
     ]

I did this:

$(`#filter`).on('change', function() {
   yo = [];
   $('option:selected', this).each(function() {
        yo.push(this.value);
   });

  arr.forEach(arr_opts => {
            yo.forEach(opt => {
                if (arr_opts.name == opt) {
                    arr_opts.in_order = true;
                }
            });
        });
        console.log(arr);
});

WHen I do this, I get my result. But when I unselect the result in the dropdown, it does not change back to false. For example, if I check one and two. It changes the in value to true for both in the array. But if I then unselect two, two remains as true.

On unselect, can I change the value of the selected back to false?

Here is my fiddle

Answer 1

I worked it out using $.inArray

arr= [
        {name: 'one', in_order: true, other_key:'ga'},
        {name: 'one', in_order: true, other_key:'gb'},
        {name: 'one', in_order: true, other_key:'gc'},
        {name: 'two', in_order: false, other_key:'gd'},
        {name: 'two', in_order: false, other_key:'ge'},
        {name: 'two', in_order: false, other_key:'gf'},
        {name: 'three', in_order: false, other_key:'gg'},
        {name: 'three', in_order: false, other_key:'gh'},
        {name: 'three', in_order: false, other_key:'gi'},
        {name: 'four', in_order: false, other_key:'gj'},
        {name: 'four', in_order: false, other_key:'gk'},
        {name: 'four', in_order: false, other_key:'gl'}
     ]
console.log(arr);

let yo;
$(`#filter`).on('change', function() {
   yo = [];
   $('option:selected', this).each(function() {
        yo.push(this.value);
   });
   
 console.log(yo);

  arr.forEach(arr_opts => {
 		if ($.inArray(arr_opts.name, yo) !== -1) {
    	arr_opts.in_order = true;
  	} else {
    	arr_opts.in_order = false;
    }
  });
  console.log(arr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id='filter' multiple>
  <option value='one' selected>one</option>
  <option value='two'>two</option>
  <option value='three'>three</option>
  <option value='four'>four</option>
</select>