layui框架 select二级联动

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

HTML:

<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:
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 in data){
                              proHtml += '<option value="' + data[o].fid +  '">' + data[o].nav_title + '</option>';
                            }
                            $('#area').html(proHtml);
                            form.render();  
                        },
                        error:function(){
                            //失败执行的方法
                            alert("error");
                        }
                    })
             })

参与评论