在下拉列表取消选择时更改对象数组中的值

Question

我想根据下拉列表中的 select 更改对象数组中的值。

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'}
     ]

我这样做了：

$(`#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);
});

当我这样做时，我得到了我的结果。但是当我取消 select 下拉列表中的结果时，它不会变回 false。例如，如果我检查 one 和 two。它将数组中两者的 in 值更改为 true。但是如果我然后 unselect two，two 仍然是 true.

在 unselect 上，我可以将 selected 的值改回 false 吗？

这是我的 fiddle

Answer 1

我用 $.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>

在下拉列表取消选择时更改对象数组中的值

Change value in array of objects on dropdown unselect

javascript

arrays

jquery

ecmascript-6

dropdown