ajax实现三级联动的基本方法

来源：动视网责编：小OO 时间：2020-11-27 22:51:45

ajax实现三级联动的基本方法

本文实例为大家分享了ajax实现三级联动的具体代码，供大家参考，具体内容如下：1.首先在一个页面上布置一个div 方便日后引用方法。<；body>；<；div id="sanji">；//div的id为“sanji”<；/div>。2.sanji js处理页面。

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了ajax实现三级联动的具体代码，供大家参考，具体内容如下：1.首先在一个页面上布置一个div 方便日后引用方法。<；body>；<；div id="sanji">；//div的id为“sanji”<；/div>。2.sanji js处理页面。

本文实例为大家分享了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);

ajax实现三级联动的基本方法

推荐度：

点击下载本文 文档为doc格式

标签：方法 ajax ajax实现三级联动

热门焦点

ajax实现三级联动的基本方法

ajax实现三级联动的基本方法

ajax实现三级联动的基本方法

最新推荐

猜你喜欢

热门推荐