第七十二天上课 ajax三级联动插件

Posted 2020-07-09

js（界面）threeLinkage.js

$(document).ready(function() {
    $(‘#threeLinkage‘).html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");  //向主界面填充三个下拉列表
    
    fill(‘0001‘,‘#sheng‘);            //填充一级下拉列表
    fill($(‘#sheng‘).val(),‘#shi‘);   //填充二级下拉列表
    fill($(‘#shi‘).val(),‘#qu‘);      //填充三级下拉列表
    
    $(‘#sheng‘).change(function()         //当一级下拉列表内容改变时改变二级和三级下拉列表
    {
        fill($(‘#sheng‘).val(),‘#shi‘);
        fill($(‘#shi‘).val(),‘#qu‘);
    })

    $(‘#shi‘).change(function()          //当二级下拉列表内容改变时改变三级下拉列表
    {
        fill($(‘#shi‘).val(),‘#qu‘);
    })
    
    function fill(code,id)              //利用 ajax 连接数据并填充列表的方法
    {
        var code=code;
        $.ajax({
            async:false,            
            url:"threeLinkage.php",
            data:{code:code},
            type:‘POST‘,
            dataType:"TEXT",
            success: function(e)
            {
                var str=‘‘;
                var hang=e.split(‘|‘);
                for(var i=0;i<hang.length;i++)
                {
                    var lie=hang[i].split(‘^‘);
                    str+="<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
                }
                $(id).html(str);
            }
        });
    }    
});

php（界面） threeLinkage.php

<?php
include "class/uniondatabase-class.php";
$db=new unionDatabase();
$code=$_POST[‘code‘];
$sql="select * from chinastates where ParentAreaCode={$code}";
echo $db->queryStr($sql);

引用方法，在html界面创建一个标签，将id命名为 threeLinkage 即可