layui select二级联动

        原理：JS获取option value, ajax到php，从MYSQL中取出数据，返回JSON，JQ控制二级栏目变化

        HTML：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

< label  class = "layui-form-label" >所属分类</ label >        < div  class = "layui-input-inline" >               < select  name = "cid"   lay-filter = "test" >                       <? php  foreach($res as $v){ ?>                          < option  value="<?php echo $v['id'];?>"><? php  echo $v['title'];?></ option >                      <? php  } ?>                </ select >         </ div >          < label  class = "layui-form-label" >栏目</ label >         < div  class = "layui-input-inline" >               < select  name = "cid"   id = "area" >                     < option  value = "0" >请选择栏目</ option >                </ select >         </ div >

        AJAX：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

form.on( 'select(test)' , function (data){                      var  fid=$( "select" ).val();                      $.ajax({                          url:  "" , //请求地址                          type:  "POST" , //请求方式                          dataType:  "JSON" , //返回数据类型                          data: {fid: fid}, //发送的参数                          success: function (data){                              $( '#area option' ).hide();                              var  proHtml =  '' ;                              for ( var  o  in  data){                                proHtml +=  '<option value="'  + data[o].fid +   '">'  + data[o].nav_title +  '</option>' ;                              }                              $( '#area' ).html(proHtml);                              form.render();                            },                          error: function (){                              //失败执行的方法                              alert( "error" );                          }                      })                 })

        原理：JS获取option value, ajax到php，从MYSQL中取出数据，返回JSON，JQ控制二级栏目变化

        HTML：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

< label  class = "layui-form-label" >所属分类</ label >        < div  class = "layui-input-inline" >               < select  name = "cid"   lay-filter = "test" >                       <? php  foreach($res as $v){ ?>                          < option  value="<?php echo $v['id'];?>"><? php  echo $v['title'];?></ option >                      <? php  } ?>                </ select >         </ div >          < label  class = "layui-form-label" >栏目</ label >         < div  class = "layui-input-inline" >               < select  name = "cid"   id = "area" >                     < option  value = "0" >请选择栏目</ option >                </ select >         </ div >

        AJAX：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

form.on( 'select(test)' , function (data){                      var  fid=$( "select" ).val();                      $.ajax({                          url:  "" , //请求地址                          type:  "POST" , //请求方式                          dataType:  "JSON" , //返回数据类型                          data: {fid: fid}, //发送的参数                          success: function (data){                              $( '#area option' ).hide();                              var  proHtml =  '' ;                              for ( var  o  in  data){                                proHtml +=  '<option value="'  + data[o].fid +   '">'  + data[o].nav_title +  '</option>' ;                              }                              $( '#area' ).html(proHtml);                              form.render();                            },                          error: function (){                              //失败执行的方法                              alert( "error" );                          }                      })                 })