1. 程式人生 > >js解決下拉列表框互斥選項的問題

js解決下拉列表框互斥選項的問題

png hand 問題 列表框 下拉 inf 判斷 要去 發生

如圖不區分選項與其他選項是互斥的關系,當選擇了不區分時,其他選項就要去除,當有其他選項存在時,就不能有不區分

技術分享圖片

解決辦法:定義change事件,若列表發生改變,首先判斷點擊的是否是不區分,若是,則將其他選項剪切掉,若是點擊的是其他選項,就判斷已選擇的選項中是否有不區分,若有,則將其切除

源碼:

下拉列表框中定義事件:@change="handleSelectedChange" //註:@=v-on handleSelectedChange:function(value){ if(value[value.length-1]=="不區分"){//如果點擊的是不區分的選項,就將其他選項去除 value.splice(0,value.length-1); }else if(value.indexOf("不區分")!=-1){//點擊的是其他選項,若是內部含有不區分的選項,就將不區分的選項去除,註意這裏的indexOf的O是大寫的,真是煩人 value.splice(value.indexOf("不區分"),1);//註意這裏的indexOf的O是大寫的,真是煩人 } },

js解決下拉列表框互斥選項的問題