zoukankan html css js c++ java

ajax实现三级联动

1.首先在一个页面上布置一个div 方便日后引用方法

<body>
    <div id="sanji">//div的id为“sanji”
        
    </div>

2.sanji js处理页面

$(document).ready(function(){
                
            //向div里面放三个下拉菜单
        var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";//给三个下拉列表定义 str 变量
        
       $("#sanji").html(str);


        FillSheng();
        FillShi();
        FillQu();//Sheng Shi Qu的逻辑顺序  

     
         $("#sheng").change(function(){

                 FillShi();
                 FillQu();
          })//给sheng菜单添加点击事件

          $("#shi").change(function(){
            FillQu();
        })//给shi菜单添加点击事件


});//页面加载完成之后过来执行某些代码

3.填充sheng方法

function FillSheng()
{
    
        var pcode = "";//定义一个变量
        $.ajax({
                    
                   url:"chuli.php",
                   data:{pcode:pcode},
                   type:"POST",
                   dataType:"TEXT",
                   success:function(data){
                                                      var hang = data.split("^");
                                                      str +="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                     }
                    $("#sheng").html(str);

                  });




}

2.填充shi方法

function FillShi()
{
    var pcode = $("#sheng").val();
    $.ajax({
            async:false,
            url:"chuli.php",
            data:{pcode:pcode},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                    var hang = data.split("|");
                    var str = "";
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split("^");
                        str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    $("#shi").html(str);
                }
        });
}

3.填充qu方法

function FillQu()
{
    var pcode = $("#shi").val();
    $.ajax({
            url:"chuli.php",
            data:{pcode:pcode},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                    var hang = data.split("|");
                    var str = "";
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split("^");
                        str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    $("#qu").html(str);
                }
        });
}

4.chuli页面

<?php
include("DBDA.class.php");
$db = new DBDA();

$pcode = $_POST["pcode"];

$sql = "select * from chinastates where parentareacode='{$pcode}'";

echo $db->StrQuery($sql);

基本实现三级联动

查看全文

相关阅读:
Hibernate 再接触事务隔离机制
 Hibernate 再接触一级缓存二级缓存查询缓存
 Hibernate 再接触性能优化
 Hibernate 再接触 HQL
Hibernate 再接触树状结构设计以及学生课程成绩表的设计
 DotNetBar.MetroTilePanel 样式、加载数据、获取数据
 C# superGridControl 样式设置、加载数据、获取数据
 system.data.oracleclient 需要 8.17 需要oracle客户端问题
 程序员必备
 LinQ to sql

原文地址：https://www.cnblogs.com/xiaoming-6/p/6393856.html