城市二级联动 ajax 与PHP操作要有城市的数据库

连接数据库

<?php

   //var_dump($_GET);
   //准备dsn
   $dsn = 'mysql:host=localhost;dbname=数据库名;charset=utf8';

//连接数据库
   try {
       $pdo = new PDO($dsn,'root','');
   } catch (PDOException $e) {
       echo $e->getMessage();
   }

   //设置错误模式
   $pdo->setAttribute(3,1);
   //基本操作
   $sql="SELECT * FROM district WHERE upid={$_GET['upid']}";

//返回预处理
$stmt = $pdo->prepare($sql);

//执行
$stmt->execute();

   //获取结果内容
   //$list = $stmt->fetchAll(PDO::FETCH_ASSOC);
   $list = $stmt->fetchAll(2);
   //var_dump($list);
   echo json_encode($list);

正文 ajax

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script src="./jquery-1.7.2.min.js"></script>
</head>
<body>
   <form action="action.php" method="post">
       <select id="sid">
           <option value="" class="ss">--请选择--</option>
       </select>
       <input type="hidden" name="data">
       <button type="submit">提交</button>
   </form>

</body>
<script>
   //第一级别获取
   $.get('./address.php',{upid:0},function(result){
       //禁止请选择选中
       $('.ss').attr('disabled',true);
       //console.log(result);
       //console.log(result[0]);
       //得到数据数组内容我们要遍历得到每一个对象
       for(var i = 0;i<result.length;i++){
           //console.log(result[i].name);
           //遍历得到option标签
           var info = $('<option value="'+result[i].id+'" >'+result[i].name+'</option>');

           //将得到的ootion对象添加到select对象中
           $('#sid').append(info);
       }

},'json');

   //其他级别
   $('select').live('change',function(){
       //alert($(this).val());
       obj = $(this);
       //通过id来查找下一个级别
       id = obj.val();

       //清除所有其他select
       obj.nextAll('select').remove();

       $.getJSON('./address.php',{upid:id},function(result){
           //console.log(result);
           //创建一个select标签对象
           var select=$('<select></select>');
           //防止当前城市没有办法选择所以添加请选择option标签
           var op = $('<option class="mm">--请选择--</option>');

select.append(op);

           //循环将得到的数组表里面的option标签添加到select标签中
           for(var i = 0;i<result.length;i++){
               var info = $('<option value="'+result[i].id+'">'+result[i].name+'</option>');
               //将option添加到select标签对象中
               select.append(info);
           }
           //将select添加到当前标签后面
           obj.after(select);
           //把其他级别的请选择禁用
           $('.mm').attr('disabled',true);
       })
   })

   //获取选中的数据提交到操作页面
   $('button').click(function(){
       arr=[];
       console.log($('select'));
       //遍历select
       $('select').each(function(){
           //获取当前select被选中的option标签中的文本值
           sedata = $(this).find('option:selected').html();
           //获取到文本值添加到对应的数组中
           arr.push(sedata);
       })
       //删除最后一个数组请选择
       arr.pop();
       //把数据直接给隐藏域的value值即可
       $('input[name=data]').val(arr);
       //先不让他跳转
       //return false;
   })

</script>
</html>

在跳转的文件输出即可

城市二级联动 ajax 与PHP操作 要有城市的数据库

城市二级联动 ajax 与PHP操作要有城市的数据库