(转载)基于Layui的省市区三级联动

收藏
3 3429
joker
joker 2017-12-20 09:45:53
付费话题:0 积分

PHP写的,代码并不是特别的好,但是很直接的实现了效果


html代码  

<!DOCTYPE html>
<html>
<head>
  <title>城市三级联动</title>
  <meta charset="utf-8">
  <?php echo getstyle(); ?>
</head>
<body>
<form class="layui-form">
  <div class="layui-inline">
    <select>
      <option></option>
        <?php
          $db_sql->query("SELECT * FROM os_district WHERE level=1");
          while($row=$db_sql->fetch_assoc())
          {
            echo "<option value='".$row['id']."'>".$row['name']."</option>";
          }
        ?>
    </select>
  </div>
  <div class="layui-inline">
    <select id="sf"></select>
  </div>
  <div class="layui-inline">
    <select id="qy"></select>
  </div>
</form>
</body>
</html>

js代码 

<script>
layui.use('form', function(){
  var form = layui.form;
  form.on('select', function(data){
    if(data.value !=0 && data.value<37)//这里虽然是范围,一般的话不用修改,需要注意下这里不是动态的就好了,当然也可以改为动态的
    {
      $.ajax({
        type:'POST'//提交方式
        ,url:'./ajax.php'//提交地址
        ,data:'a='+data.value//提交参数
        ,success:function(data)//返回的值
        {
          $("#sf").html(data);//添加到省份选项里面
          $("#qy").empty();//由于重新选择了城市需要清空下区域选项
          form.render('select');//重新渲染
        }
      });
    }
    else if(data.value >36 && data.value<567)//这里虽然是范围,一般的话不用修改,需要注意下这里不是动态的就好了,当然也可以改为动态的
    {
      $.ajax({
        type:'POST'//提交方式
        ,url:'./ajax.php'//提交地址
        ,data:'a='+data.value//提交参数
        ,success:function(data)//返回的值
        {
          $("#qy").html(data);//添加到区域选项里面
          form.render('select');//重新渲染
        }
      });
    }
    else if(data.value ==0)//如果等于0就表示选择了第一个选项那么就要把所有选项都清空了
    {
    
      $("#sf").empty();$("#qy").empty();//清空所有选择
      form.render('select');//重新渲染
    }
  });
});
</script>

异步请求代码  

 

if(isset($_POST['a']))  
{
    $id=$_POST['a'];
    $db_sql->query("SELECT * FROM os_district WHERE upid='$id'");
    while($row=$db_sql->fetch_assoc())
    {
      echo "<option value='".$row['id']."'>".$row['name']."</option>";//这是返回的数据,将会添加到对应的option里
    }
  }

演示地址: http://baolanonline.com/dis.php 
数据库下载: http://baolanonline.com/os_district.sql  

转载地址:http://fly.layui.com/jie/21248/

如上述sql文件失效,可直接回复下载网盘资源!


当前内容需回复后查看
评论话题
提交