码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-05-21 08:54:49      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:

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 即可

 

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

标签:

原文地址:http://www.cnblogs.com/lovling/p/5511122.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!