首页 > 代码库 > 补2017.5.13

补2017.5.13

2024-09-24 07:47:01   216人阅读

三级联动的做法。(终极封装JS)

jQuery（说实话，这个我是真的没搞明白）

2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title><br>//引入jquery包
        <script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script><br>//引用我们自己封装的js文件
        <script src="http://www.mamicode.com/sanji.js"></script>
    </head>
    <body><br>//id要与封装的js插件中一致
    <div id="sanji"></div>
    </body>
</html>

　　（2）我们自己封装的js插件

$(document).ready(function(e){
    //扔三个下拉列表到主页面建的div中
    $("#sanji").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");    
    //加载省的数据
    LoadSheng();
    //加载市的数据
    LoadShi();
    //加载区的数据
    LoadQu();
    //给省的下拉列表添加点击事件，当省变化时，对应的市和区会发生变化
    $("#sheng").click(function(){
        LoadShi();
        LoadQu();
    })    
    //给市的下拉列表添加点击事件，当市变化时，对应的区发生变化
    $("#shi").click(function(){
        LoadQu();
    })
    
});

//加载省的下拉列表
function LoadSheng() {
    var pcode = "0001";
    $.ajax({
        async: false,
        url: "chuli.php",
        data: { code: pcode },
        type: "POST",
        dataType: "TEXT",
        success: function(data) {
            var hang = data.trim().split("|");
            var str = "";
            for(var i = 0; i < hang.length; i++) {
                var lie = hang[i].split("^");
                str = str + "<option value=http://www.mamicode.com/‘" + lie[0] + "‘>" + lie[1] + "</option>";
            }
            $("#sheng").html(str);
        }
    });
}

//加载市省的下拉列表
function LoadShi() {
    var pcode = $("#sheng").val();
    $.ajax({
        async: false,
        url: "chuli.php",
        data: { code: pcode },
        type: "POST",
        dataType: "TEXT",
        success: function(data) {
            var hang = data.trim().split("|");
            var str = "";
            for(var i = 0; i < hang.length; i++) {
                var lie = hang[i].split("^");
                str = str + "<option value = http://www.mamicode.com/‘" + lie[0] + "‘>" + lie[1] + "</option>";
            }
            $("#shi").html(str);
        }
    });
}

//加载省的下拉列表
function LoadQu() {
    var pcode = $("#shi").val();
    $.ajax({
        url: "chuli.php",
        data: { code: pcode },
        type: "POST",
        dataType: "TEXT",
        success: function(data) {
            var hang = data.trim().split("|");
            var str = "";
            for(var i = 0; i < hang.length; i++) {
                var lie = hang[i].split("^");
                str = str + "<option value = http://www.mamicode.com/‘" + lie[0] + "‘>" + lie[1] + "</option>";
            }
            $("#qu").html(str);
        }
    });




 其次就是处理页面：chuli.php

1
2
3
4
5
6
7
<?php
$code=$_POST["code"];
require "DBDA.class.php";
$db=new DBDA();
$sql="select areacode,areaname from chinastates where parentareacode=‘{$code}‘";
$str=$db->strquery($sql);
echo $str;

最后就是封装的类文件：DBDA.class.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function strquery($sql)
    {
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        $result = $db ->query($sql);
        $arr =$result->fetch_all(); 
        $str="";
        foreach($arr as $v)
        {
        $str=$str.implode("^",$v)."|";
         }
        $str = substr($str,0,strlen($str)-1);
        return $str;
            }
}
?>
  

补2017.5.13


联系
我们