zoukankan      html  css  js  c++  java
  • 城市二级联动 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>

    在跳转的文件输出即可

  • 相关阅读:
    SQL SERVER 2005生成带数据的脚本文件 [work around]
    VB.NET窗体关闭事件
    Code::Blocks The open source, cross platform, free C++ IDE.
    VB Twips And Pixels 缇和像素
    JQuery 鼠标点击其它地方隐藏层
    Asp.net 基于Form的权限方法备忘
    JQuery Highcharts图表控件多样式显示多组数据
    ASP.NET中动态获取数据使用Highcharts图表控件
    使用windows服务和.NET FileSystemWatcher对象来监控磁盘文件目录的改变
    【JQuery插件】Select选择框的华丽变身
  • 原文地址:https://www.cnblogs.com/hua-nuo/p/12857675.html
Copyright © 2011-2022 走看看