需求：深圳引航站需要把这17个选项变为4个，且具有4级联动
原页面：

效果图：

原页面选择器代码：

数据内容截取：
{“dictionary”:[{“dictionaryName”:“SCT 集装箱船 L小于200米 D不限制”,“dictionaryValue”:“SCT_CONTAINER_L<200_D”,“isDefault”:“0”},
{“dictionaryName”:“SCT 集装箱船 L大于等于200米小于370米 D小于14.0米”,“dictionaryValue”:“SCT_CONTAINER_200<=L<370_D<14”,“isDefault”:“0”},
{“dictionaryName”:“SCT 集装箱船 L大于等于200米小于370米 D大于等于14.0米”,“dictionaryValue”:“SCT_CONTAINER_200<=L<370_14<=D”,“isDefault”:“0”},
{“dictionaryName”:“SCT 集装箱船 L大于等于370米 D小于14.0米”,“dictionaryValue”:“SCT_CONTAINER_370<=L_D<14”,“isDefault”:“0”},
{“dictionaryName”:“SCT 集装箱船 L大于等于370米 D大于等于14.0米”,“dictionaryValue”:“SCT_CONTAINER_370<=L_14<=D”,“isDefault”:“0”}

首先我们需要观察显示的内容与传值之间的规律

显示的是中文，且一段显示的中文里包含4段，每段用空格隔开，传值是以_进行分段隔开

标题前端篇

该系统前端是angularJS
首先，我们要做的是数据清洗，把它做成4个选择器，安排好每个选择器的内容是啥。
即：清洗数据

firstArray:any =[]
secondArray:any = []
thirdArray:any = []
fourthArray:any =[]
//创建4个Array用来装4个选择器数据setList() {this.channelShipTypes.forEach(v => {let array = v.dictionaryName.split(' ')array.map((j,k)=>{switch(k){case 0 :this.firstArray.push({name:array[k]})break;case 1:this.secondArray.push({name:array[k]})break;case 2:this.thirdArray.push({name:array[k]})break;case 3:this.fourthArray.push({name:array[k]})break;}})})

数据按空格进行分割，丢到array之后会出现很多重复的数据，因此需要去重

this.firstArray=this.firstArray.reduce(function(prev,element){if(!prev.find(el=>el.name==element.name)) {prev.push(element)}return prev},[])this.secondArray=this.secondArray.reduce(function(prev,element){if(!prev.find(el=>el.name==element.name)) {prev.push(element)}return prev},[])this.thirdArray=this.thirdArray.reduce(function(prev,element){if(!prev.find(el=>el.name==element.name)) {prev.push(element)}return prev},[])this.fourthArray=this.fourthArray.reduce(function(prev,element){if(!prev.find(el=>el.name==element.name)) {prev.push(element)}return prev},[])

因为显示的是dictionaryName，但是我们真实传值是dictionaryValue，所以有必要赋值传值

templateArray:any =[]
this.firstArray.map(v=>{if(v.name=='SCT'){v.value='SCT'}else if(v.name=='CCT&MCT'){v.value='CCT&MCT'}else if(v.name=='DCW'){v.value='DCW'}else if(v.name=='CR'){v.value='CR'}else{v.value=null}})this.secondArray.map(v=>{if(v.name=='集装箱船'){v.value='CONTAINER'}else if(v.name=='邮轮'){v.value='MAIL'}else{v.value=null}})this.thirdArray.map(v=>{if(v.name=='LOA小于200米'){v.value='L<200'}else if(v.name=='LOA大于等于200米小于370米'){v.value='200<=L<370'}else if(v.name=='LOA大于等于370米'){v.value='370<=L'}else if(v.name=='LOA无限制'){v.value='STEAMER_L'}else{v.value=null}})this.fourthArray.map(v=>{if(v.name=='D不限制'){v.value='D'}else if(v.name=='D大于等于14.0米'){v.value='14<=D'}else if(v.name=='D小于14.0米'){v.value='D<14'}else if(v.name=='D无限制'){v.value='D'}else{v.value=null}})this.templateArray=this.fourthArray}

联动部分：

    firstChoice: any;secondChoice: any;thirdChoice: any;fourthChoice: any;//写入4个选择器内容changeOne(){this.queryCondition.shipType=''this.setList()if(this.firstChoice=='null'){this.secondArray=[]this.thirdArray=[]this.fourthArray=[]this.secondChoice=''this.thirdChoice=''this.fourthChoice=''this.queryCondition.shipType='null'}else if(this.firstChoice=='CR'){this.secondArray=[{name:'邮轮',value:'MAIL'}]this.secondChoice='MAIL'this.thirdArray=[{name:'LOA无限制',value:'STEAMER_L'}]this.thirdChoice='STEAMER_L'this.fourthArray=[{name:'D无限制',value:'D'}]this.fourthChoice='D'this.queryCondition.shipType=this.firstChoice+'_'+this.secondChoice+'_'+this.thirdChoice+'_'+this.fourthChoice}else{this.secondArray=[{name:'集装箱',value:'CONTAINER'}]this.secondChoice='CONTAINER'this.thirdChoice=''this.fourthChoice=''this.thirdArray.map((v,i)=>{if(v.name=='LOA无限制'){this.thirdArray.splice(i,1)}})}}changeTwo(){// this.queryCondition.shipType+=+'_'+this.secondChoice}changeThirdIt(){this.fourthArray=this.templateArrayif(this.firstChoice!=='CR'&&this.thirdChoice=='L<200'){this.fourthArray=[{name:'D不限制',value:'D'}]this.fourthChoice='D'this.queryCondition.shipType=this.firstChoice+'_'+this.secondChoice+'_'+this.thirdChoice+'_'+this.fourthChoice}else if(this.firstChoice!=='CR'&&this.thirdChoice!=='L<200'){this.fourthArray.map((v,i)=>{if(v.name=='D不限制'){this.fourthArray.splice(i,1)}})this.fourthArray.map((v,i)=>{if(v.name=='D无限制'){this.fourthArray.splice(i,1)}})this.fourthChoice=this.fourthArray[0].valuethis.queryCondition.shipType=this.firstChoice+'_'+this.secondChoice+'_'+this.thirdChoice+'_'+this.fourthChoice} else{this.fourthArray=this.templateArraythis.fourthChoice=''}}changeFour(){this.queryCondition.shipType=''this.queryCondition.shipType=this.firstChoice+'_'+this.secondChoice+'_'+this.thirdChoice+'_'+this.fourthChoice}

该联动选择器包含数据清洗，联动，value和name不一的情况下如何传值拼凑成准确的传值进行查询