数组互斥选择(列表中多个下拉框互斥选择)

有时候我们会有这样的需求，需要遍历多个相同的下拉框，且已选择的下拉选项不能被再次选择，此时我们就需要把已选择进行禁用！

第一步、这时我可以定义一个数组来存储已选择项，定义一方法changeArr从原始数组中改变已选择项为禁用状态。
第二步、当下拉框值改变时调用方法changeTempArr更改并获取新的已选择项，再次调用changeArr改变新的已选择项为禁用状态。

var arr = [
  { code: '1', name: 'fff1' },
  { code: '2', name: 'fff2' },
  { code: '3', name: 'fff3' },
  { code: '4', name: 'fff4' },
];
//  var arr1 =['1','2']
//  遍历arr1三个值，是否在arr中存在重复,如果有就添加属性disabled:true,都没有才添加属性disabled:false

const changeArr = (arr1, arr) => {
  // const arr1 = [value];
  for (let i = 0, len = arr.length; i < len; i++) {
    let item1 = arr[i];
    for (let j = 0, len = arr1.length; j < len; j++) {
      let item2 = arr1[j];
      if (item1.code == item2) {
        arr[i].disabled = true;
        break;
      } else {
        arr[i].disabled = false;
      }
    }
  }
  //  console.log('arr', arr);
  return arr;
};

// mock　已选择数据唯一值标识
const tempArr = ['1', '2'];
var a = changeArr(tempArr, arr);
console.log('已选择数据', a);
console.log('tempArr', tempArr);

// 下拉框事件触发时，prev为上一次存取的值，next为新值，获取替换后的新的已选择数据
changeTempArr = (prev, next) => {
  // console.log('changeTempArr', tempArr, prev, next);
  if (tempArr.indexOf(prev) !== -1) {
    tempArr.splice(
      tempArr.findIndex(item => item === prev),
      1,
      next
    );
  } else {
    tempArr.push(next);
  }
  console.log('changeTempArr', tempArr);
  return tempArr;
};

var newA = changeTempArr('2', '3');

console.log(newA);
var b = changeArr(newA, arr);
console.log('替换后的已选择数据', b);
// console.log(b);

参考方法　关于多个下拉框互斥的问题