zoukankan      html  css  js  c++  java
  • 城市二级联动

    数据库添加需要的省份和城市名

    index

    /**
    * 查询管理员的省份
    * @author liuz
    */
    public function selProvince() {
    $Area = M ( 'area' );
    $selCity = array ();
    $selPro = $Area->distinct ( true )->field ( 'province' )->select ();
    $this->assign ( 'selPro', $selPro );
    }
    /**
    * 查询管理员的城市
    * @author liuz
    */
    public function selCity() {
    $Area = M ( 'area' );
    $selPro = $_POST ['pro'];
    $data ['error'] = "";
    $condition ['province'] = $selPro;
    $city = $Area->where ( $condition )->field ( 'city' )->select ();
    $count = count ( $city );
    $data ['count'] = $count;
    $data ['city'] = array ();
    if ($city == null || $city <= 0) {
    $data ['error'] = "数据不存在~~!";
    } else {
    foreach ( $city as $c ) {
    array_push ( $data ['city'], $c ['city'] );
    }
    }
    $this->ajaxReturn ( $data );
    }

    页面

    <div class="col-sm-8">
    <select name="province" id="province">
    <option value="">请选择省份</option>
    <volist name="selPro" id="pro">
    <option value="{$pro['province']}">{$pro['province']}</option>
    </volist>
    </select> 
    <select name="city" id="city">
    <option value="">请选择城市</option>
    </select>
    </div>

    该页面做ajax

    <script>
      $(document).ready(function(){
           //一级分类联动二级分类
           $("#province").change(function(){
               var pro=$(this).val();
    $.ajax({
    type: 'POST',
    dataType:'json',
            url:"{:U('index/selCity')}",
    data:"pro="+pro,
    success :function(data){
    $('#city').empty();
    $('#city').append("<option value=''>请选择城市</option>");
    for(var i=0;i < data.city.length;i++){
    $('#city').append("<option value='"+data.city[i]+"'>"+data.city[i]+"</option>");
    }
    },
    error:function(data){
    alert(data.error);
    },
    });
            });
    });

    </script>

  • 相关阅读:
    Android WebView使用
    Android
    Instant Buy Android API Tutorial
    cocos2dx 手势识别
    cocos2d-x 判断两条直线是否相交
    golang 环境bash 以及shell
    技术描述
    golang web开发获取get、post、cookie参数
    Linux curl 模拟form表单提交信息和文件
    Golang HTTP文件上传
  • 原文地址:https://www.cnblogs.com/langwo/p/7471100.html
Copyright © 2011-2022 走看看