# Online表單 JS增強實現下拉聯動 > > 需求 ：online表單使用JS增強實現省市區下拉聯動 [TOC] ## 示例效果  ## 配置步驟： ### ~~1. 新建字典(2021-3月之后版本可忽略此步驟)~~ ~~新建一個空的數據字典，字典項名稱為空，數據值打個空格就可以錄入了~~ >[info] 2021-3月之后版本可忽略此步驟  ### 2. online表單添加字段 在online表單中新增3個字段，pro，city，area 詳細配置如下， 必須配置`下拉框`，且字典code一定要寫 >[info] `2021-3月之后版本可忽略字典code配置,頁面屬性下拉框一定要配置`    ### 3.編寫js增強  代碼示例： ``` //示例中數據寫死，實際需要自己寫請求， loaded(){ that.changeOptions('pro',[ {value:'1',text:'安徽省'}, {value:'2',text:'河南省'} ]) } onlChange(){ return { pro(){ let value = event.value let cityOptions = [] if(value=='2'){ cityOptions = [{text:'鄭州市',value:'2-1'},{text:'開封市',value:'2-2'}] }else{ cityOptions = [{text:'合肥市',value:'1-1'},{text:'蕪湖市',value:'1-2'}] } that.changeOptions('city',cityOptions); } city(){ let value = event.value let areaOptions = [] if(value=='1-1'){ areaOptions= [{text:'包河區',value:'1-1-1'},{text:'臨江縣',value:'1-1-2'}] }else{ areaOptions= [{text:'其他區',value:'xxx'},{text:'其他縣',value:'xxxxx'}] } that.changeOptions('area',areaOptions); } } } ```