【1 index.php】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>城市多级联动</title> <script src="./jquery-1.7.2.min.js"></script> </head> <body> <form action="action.php" method="post"> <select id="sid"> <option value="">--请选择--</option> </select> <input type="hidden" name="data"> <button type="submit">提交</button> </form> </body> <script> //第一级别获取 $.get('./returnAddress.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('./returnAddress.php',{upid:id},function(result){ //console.log(result); //创建一个select标签对象 var select=$('<select></select>'); //防止当前城市没有办法选择所以添加请选择option标签 var op = $('<option>--请选择--</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>
【2 returnAddress.php】
<?php //准备dsn $dsn = 'mysql:host=localhost;dbname=district;charset=utf8'; //连接数据库 try { $pdo = new PDO($dsn,'root','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);