路人甲12137 2019-12-17 09:49 采纳率: 90.9%
浏览 1229
已结题

js select 多级联动 动态显示option

图片说明

出题章节后面的下拉框里面选中的值,在其他的下拉列表中剔除

例如,在第一个select选中Java,其余的都不显示Java选项,包括新添加的部分

或者说在点击保存的时候校验一下select的选中值不能有重复的,如果有就提示用户哪几个重复

代码部分如下

<el-dialog :title="titleDialog" :visible="dialogFormSection" :before-close="cancelSection" width="1000px">
  <el-form :model="formSection" :rules="sectionRules" ref="formSection">
    <el-form-item label="选择题型:" :label-width="labelWidth" prop="questionType">
      <el-select v-model="formSection.questionType" @change="selectQuestionType">
        <el-option v-for="item in questionTypeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="部分名称:" :label-width="labelWidth" prop="sectionName">
      <el-input v-model="formSection.sectionName" style="width: 500px"></el-input>
    </el-form-item>
    <el-form-item label="总题目数量:" :label-width="labelWidth" prop="questionScore" id="allQuestion-content">
      <span>{{allQuestionNum}}</span>
      <span style="margin-left: 50px">
        每题分数
        <el-input v-model="formSection.questionScore" style="width: 80px;margin-left: 10px"></el-input>
        分
      </span>
      <span style="margin-left: 50px">总分数:{{allScore}}分</span>
      <el-button type="text" style="float: right" @click="addProblemRules">添加出题章节</el-button>
    </el-form-item>
    <div v-for="(item,index) in sectionData" :key="item.id" class="addSection-content">
      <div class="content">
        <div style="margin-top: 10px">
          {{index+1}}、出题章节(多选):
        </div>
      </div>
      <div class="content">
        <el-select style="width: 170px" multiple collapse-tags v-model="item.repositorySectionIdList" @change="changeRepositorySectionId(item.repositorySectionIdList, index)">
          <el-option v-for="item1 in courseChapterOptions" :key="item1.id" :value="item1.id" :label="item1.name"></el-option>
        </el-select>
      </div>
      <div class="content"><div style="margin-top: 10px">出题数量:{{item.partStrategyQuestionNum}}</div></div>
      <div class="content" v-for="(item2,index2) in item.automaticRuleDifficultList" :key="index2">
        <span>
          {{item2.difficultName}}
          <el-input class="difficult-content" v-model.number="item2.difficultNum"></el-input>/
          <span v-for="(item3,index3) in sectionQuestionArr[index]" :key="index3" >{{(item3.difficult === item2.diffcultType) ? item3.quantity : ''}}</span>
        </span>
      </div>
      <div class="content"><el-button type="text" @click="deleteChapter(item,index)">删除</el-button></div>
    </div>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitSection">保 存</el-button>
    <el-button @click="cancelSection">取 消</el-button>
  </div>
</el-dialog>
addProblemRules(){
  this.$refs.formSection.validate((valid) => {
    if(valid){
      //把请求回来的难度list放到sectionData中,用于显示
      // for(let i=0,len=(this.sectionData.length)+1;i<len;i++){
        this.automaticRuleDifficultList.forEach(e=>e.difficultNum = 0);
        this.sectionData.push({
          //由于vue数据双向绑定问题,automaticRuleDifficultList会动态改变,不能区分数组项
          //进行转换
          automaticRuleDifficultList:JSON.parse(JSON.stringify(this.automaticRuleDifficultList)),
        })
        let tempArr = new Array();
        for(let i=1;i<6;i++){
          let obj = Object({quantity: 0, difficult: i});
          tempArr.push(obj);
        }
        this.sectionQuestionArr.push(tempArr);
    }
  })
},

  • 写回答

2条回答 默认 最新

  • 拾年丶不久 2019-12-17 10:01
    关注

    你的option是用vue数据绑定添加的吗?我的想法每个下拉对应的数据都需要对应一份单独的数据,第一个下拉框对应的数据是源数据的拷贝,当他的值发生改变后,生成一份他的数据的拷贝然后去掉被选中的值作为下一个选项的数据,一直这么执行下去是不是可以实现

    评论

报告相同问题?

悬赏问题

  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面