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

不念不忘少年蓝@ 2023-01-06 11:46 156阅读 0赞

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

第一步、这时我可以定义一个数组来存储已选择项，定义一方法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);

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

[Link 1]: https://blog.csdn.net/qq_14926871/article/details/87369491?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-2.control

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端日期选择，下拉框选择效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

约定不等于承诺〃/ 2023年06月01日 12:38/ 0 赞/ 12 阅读

相关下拉选择框插件chosen

写在前面本文介绍下拉选择框插件chosen的使用，参考[这里][Link 1]而成。 1：下载在[这里][Link 2]下载。 2：使用 2.1：引

ゝ一世哀愁。/ 2023年01月14日 06:58/ 0 赞/ 178 阅读

相关 Vue中-下拉框可以选择可以填写

<el-form-item label="方法名称"> <el-autocomplete popper-

r囧r小猫/ 2023年01月08日 02:18/ 0 赞/ 107 阅读

相关 Vue中-下拉框可以选择可以填写

<el-form-item label="方法名称"> <el-autocomplete popper-

Love The Way You Lie/ 2023年01月07日 03:52/ 0 赞/ 96 阅读

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

有时候我们会有这样的需求，需要遍历多个相同的下拉框，且已选择的下拉选项不能被再次选择，此时我们就需要把已选择进行禁用！第一步、这时我可以定义一个数组来存储已选择项，

不念不忘少年蓝@/ 2023年01月06日 11:46/ 0 赞/ 157 阅读

相关 select下拉框一次选择多个数据属性

最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台，使用起来其实还挺方便的，大部分的组件源码里面都已经写好了，用的时候只需要把源码拿出来修改修

桃扇骨/ 2022年12月20日 12:55/ 0 赞/ 135 阅读

相关 JQuery下拉列表左右选择

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉列

冷不防/ 2022年04月22日 05:56/ 0 赞/ 224 阅读

相关 jQuery完成下拉列表左右选择

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉列

小鱼儿/ 2022年04月06日 08:20/ 0 赞/ 240 阅读

相关