Layui下拉3級聯動

本文轉載自查看原文 2019-12-07 16:36 363 javascript

HTML排版展示詳情

js代碼：

  1 layui.use(['layer', 'form','xform','layer'], function () {
  2     var element = layui.element;
  3     var form = layui.form;
  4     var layer  = layui.layer;
  5 
  6     // 城市列表
  7     $.ajax({
  8         url:"/city/findById",
  9         type:"GET",
 10         async: false,
 11         cache: false,
 12         contentType: 'application/json',
 13         dataType: "json",
 14         success: function (json) {
 15             console.log(json);
 16             var CityListHTML='';
 17             for (var i=0; i<json.data.length; i++){
 18                 CityListHTML+= '<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
 19             }
 20             $('#CityList').append(CityListHTML);
 21             form.render();
 22 
 23             // 區域列表
 24             form.on('select(CityList)', function(data){
 25                 var CityListid = data.value;
 26                 console.log(CityListid);
 27                 if (CityListid != "Nonull"){
 28                     document.getElementById('regionList').innerHTML='';
 29                     document.getElementById('PoliceList').innerHTML='';
 30                     document.getElementById('Community').innerHTML='';
 31                     $.ajax({
 32                         url:"/region/findById/"+CityListid,
 33                         type:"GET",
 34                         async: false,
 35                         cache: false,
 36                         contentType: 'application/json',
 37                         dataType: "json",
 38                         success: function (json) {
 39                             console.log(json);
 40                             document.getElementById('regionList').innerHTML='';
 41                             var regionListHTML='';
 42                             for (var i=0; i<json.data.length; i++){
 43                                 regionListHTML+='<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
 44                             }
 45                             $('#regionList').append(regionListHTML);
 46                             form.render();
 47 
 48                             // 派出所列表
 49                             form.on('select(regionList)', function(data){
 50                                 var regionListid = data.value;
 51                                 document.getElementById('PoliceList').innerHTML='';
 52                                 document.getElementById('Community').innerHTML='';
 53                                 $.ajax({
 54                                     url:"/localPoliceStation/findById/"+regionListid,
 55                                     type:"GET",
 56                                     async: false,
 57                                     cache: true,
 58                                     contentType: 'application/json',
 59                                     dataType: "json",
 60                                     success:function (json) {
 61                                         console.log(json);
 62                                         document.getElementById('PoliceList').innerHTML='';
 63                                         var PoliceListHTML='';
 64                                         for (var i=0; i<json.data.length; i++){
 65                                             PoliceListHTML+='<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
 66                                         }
 67                                         $('#PoliceList').append(PoliceListHTML);
 68                                         form.render();
 69 
 70                                         // 社區列表
 71                                         form.on('select(PoliceList)', function(data){
 72                                             var PoliceListid = data.value;
 73                                             $.ajax({
 74                                                 url:"/community/findById/"+PoliceListid,
 75                                                 type:"GET",
 76                                                 async: false,
 77                                                 cache: false,
 78                                                 contentType: 'application/json',
 79                                                 dataType: "json",
 80                                                 success:function (json) {
 81                                                     console.log(json);
 82                                                     document.getElementById('Community').innerHTML='';
 83                                                     var CommunityHTML='';
 84                                                     for (var i=0; i<json.data.length; i++){
 85                                                         CommunityHTML+='<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
 86                                                     }
 87                                                     $('#Community').append(CommunityHTML);
 88                                                     form.render();
 89                                                 }
 90                                             })
 91                                         })
 92                                     }
 93                                 })
 94                             })
 95                         }
 96                     })
 97 
 98                 }
 99                 else {
100                     document.getElementById('regionList').innerHTML='';
101                     document.getElementById('PoliceList').innerHTML='';
102                     document.getElementById('Community').innerHTML='';
103                     form.render();
104                 }
105             })
106         }
107     });
108     form.render();
109 });

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 layui 下拉框三級聯動 layui 二級聯動 C# MVC LayUI實現下拉框二級聯動 layui省市區下拉菜單三級聯動 layui的省市縣三級聯動簡單的layui二級聯動 Layui實現三級聯動下拉框的二級聯動前端下拉框實現聯查（二級聯動，三級聯動） layui省市區三級聯動