jquery ajax 三级联动,怎么在选择任意省份时,绑定对应的市,选择市时绑定对应得县,怎么做判断,谢谢啦

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery ajax 三级联动,怎么在选择任意省份时,绑定对应的市,选择市时绑定对应得县,怎么做判断,谢谢啦相关的知识,希望对你有一定的参考价值。

参考技术A html页的Body标签内添加三个Select选项,分别用于显示省、市、区

<select id="S1" >
</select>
<select id="S2">
</select>
<select id="S3">
</select>追问

选择第一个之后,怎么联动选择第二个啊

本回答被提问者和网友采纳

省市区三级联动 用ajax实现

数据库dt_area中表的数据结构:

html代码部分:

省:<select name="" id="sheng" onChange="selshi(this)">
    <option value="">请选择</option>
    </select>
市:<select name="" id="shi" onChange="selqu(this)">
    <option value="">请选择</option>
</select>
区:<select name="" id="qu">
    <option value="">请选择</option>
</select

js代码部分:

//用来放chulidata函数里面的新数组
    var attr = [];
    //页面加载完成后调用函数sendInfo,给函数传了个省下拉框的id
    window.onload = function(){
        sendInfo(\'sheng\');
    }
    //页面加载完成后调用的函数(code=0页面加载完成后先将省的信息显示到页面),type就是传过来的select的id,code是以get方式向php页面传的area_parent_id
    function sendInfo(type,code=0){
        //创建对象
        var xhr = new XMLHttpRequest();
        //监听ajax状态
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                //处理数据,调用函数chulidata,传的两个参数xhr.responseText(从php页面查询的数据库数据,形式为:110000,北京;120000,天津;) type select的id
                chulidata(xhr.responseText,type);
            }
        }
        //创建一个新的http请求:以get的方式访问php页面,
        xhr.open("get",\'sanjiliandong.php?code=\'+code);
        //发送请求
        xhr.send(null);
    }
    //处理数据的函数,data:xhr.responseText(从php页面查询的数据库数据) type:select的id
    function chulidata(data,type){
        //将从php页面查询的数据进行处理,去掉分隔符; 组成一个一维数组,形式为: [ "110000,北京", "120000,天津"]
        var arr1 = data.split(\';\'),
            //定义一个变量:一个option标签
            str = "<option value=\'\'>请选择</option>";
        //遍历数组
        for(var i=0;i<arr1.length;i++){
            //将数组中每个原素中的逗号去掉,组成的attr数组形式为:[[ "110000", "北京" ] , [ "120000", "天津" ]]
            attr[i] = arr1[i].split(\',\');
            //将attr数组里的元素放到str的option标签中
            str += "<option value=\'"+attr[i][0]+"\'>"+attr[i][1]+"</option>";
        }
        //将str放到相应的页面位置显示
        document.getElementById(type).innerHTML = str;
    }
    //在选择省时调用的函数,obj是调用函数时传过来的this
    function selshi(obj){
        //在选择省时将区里面的内容清空
        var str = "<option value=\'\'>请选择</option>";
        document.getElementById(\'qu\').innerHTML = str;
        //将市的select标签的id和相应省标签的value值在调用函数sendInfo时传过去
        sendInfo(\'shi\',obj.value);
    }
    //选择市时调用的函数
    function selqu(obj){
        //将区的select标签的id和相应市标签的value值在调用函数sendInfo时传过去
        sendInfo(\'qu\',obj.value);
    }
View Code

php代码部分:

<?php
$db = new MySQLi(\'localhost\',\'root\',\'\',\'dt_area\');
!mysqli_connect_error() or die(\'链接错误\');
$db->query(\'set names utf8\');
//以get方式提交过来的code,也就是数据库表中的area_parent_id
$code = $_GET[\'code\'];
//数据库查询,条件是area_parent_id等于sendInfo函数里面的xhr.open请求传过来的code值
$sql = \'select id,area_name from dt_area where area_parent_id = \'.$code;
$res = $db->query($sql);
$arr = $res->fetch_all();

$str = "";
//for循环将查询得到的$arr数组,变成 110000,北京;120000,天津 这样的形式
foreach($arr as $key=>$value){
    foreach($value as $v){
        $str.=$v.",";
    }
    //去掉110000,北京,120000,天津, 最后面的逗号
    $str = substr($str,0,-1);
    //110000,北京;120000,天津;
    $str.= \';\';
}
//去掉110000,北京;120000,天津; 最后面的分号
$str = substr($str,0,-1);
//最后输出 110000,北京;120000,天津
echo $str;
View Code

 这是php页面查询的内容的样式:

 substr:

1,javascript substr()方法:截取字符串,从字符串开始的地方

例如:var str = string;

   var jg1 = str.substr(3);

   var jg2 = str.substr(2,6);

jg1的内容就是:ing

jg2的内容就是:ring

2,php的substr()函数 返回字符串的一部分

<?php
$arr = \'1,2,3,5,6,7,8\';
$a = substr($arr,1);
$b = substr($arr,2,-2);
echo $a;
echo $b

$a结果为:,2,3,5,6,7,8

$b结果为:2,3,5,6,7

split:把一个字符串分割成数组

例如:有个字符串:var str = "1;2;3;4";

         console.log(str.split(";"));

结果为:1,2,3,4

以上是关于jquery ajax 三级联动,怎么在选择任意省份时,绑定对应的市,选择市时绑定对应得县,怎么做判断,谢谢啦的主要内容,如果未能解决你的问题,请参考以下文章

jQuery实现 三级联动--省市县

20180825 ajax PHP html js 实现 三级联动(省 市 区)

ajax三级联动下拉菜单

一张表 怎么 jquery省市区三级联动

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

三级联动