The two drop-down boxes use the same set of data, which is mutually exclusive and filtered in the current drop-down box

The two drop-down boxes use the same set of data and are mutually exclusive. If the first drop-down box selects one of the data, the selected data will not appear in the second drop-down box.

will not appear in the currently selected drop down.

import React from 'react'
import { Select, Form } from "antd";
function Test() {
 const {Item} =Form;
 const {Option} = Select;
const   options = 
        [
        {
            value: 1,
            name: 'AA',
        },
        {
            value: 2,
            name: 'BB',
        },
        {
            value: 3,
            name: 'CC',
        },
        {
            value: 4,
            name: 'DD',
        },
        {
            value: 5,
            name: 'EE',
        },
       
      ]
    return (
        <Form>
            <Item>
                <Select>
                   {
                    options.map(item=>{
                        <Option value={item.value} key={item.value}>
                            {item.name}
                        </Option>
                    })
                   }
                </Select>
            </Item>
            <Item>
                <Select>
                   {
                    options.map(item=>{
                        <Option value={item.value} key={item.value}>
                            {item.name}
                        </Option>
                    })
                   }
                </Select>
            </Item>
        </Form>
    )
}
export default Test;

The two drop-down boxes use the same set of data, which is mutually exclusive and filtered in the current drop-down box

Good Question 0Comment Collection Report

0 Answer

dengwenlon 注册会员
2023-01-25 18:05

Two dropdown box mutually exclusive implementation of the way is to dynamically generate the drop-down box option, the code is as follows:

一、首先先获取下拉框所有选项的dom元素
var Alloptions = $(".single").clone();
二、
setSelectDisabled(".pairTow", $('.pairOne option:selected').val()); //pairOne为左边下拉框的class；pairTwo为右下拉框calss
function setSelectDisabled(id, selectVal) {
   var oldValue = $(id).val();
   $(id).find('option').remove();
   Alloptions.find("option").each(function(){
      var option = $(this).clone();
      var val = option.attr("value");
      if (oldValue==val) {
         // 默认选择原来的值
         option.attr("selected",true);
      }
      if(option.val()!=selectVal){
         $(id).append(option);
      }
   });
   // 如果当前选择的已经被选择了，那就默认选择第一个了
   if (oldValue==selectVal) {
      $(id).find('option').eq(0).attr("selected",true);
   }
}