本文实例为大家分享了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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持尊托云数。
步骤: 1、新建一个空文件,文件名为hhhh 2、初始化 git init 3、自己要与origin...
vscode怎么浏览器打开html预览?这里大家可以通过安装open in browser插件解决。...
1.小程序端代码示例 my.getPhoneNumber({ success: (res) = { let encryptedData...
PHP+Mysql简单实现了图书购物车 本文主要讲述如何通过PHP+HTML简单实现图书购物...
图片来自 Pexels 突然电话响了起来,一看是我们的一个开发同学,顿时紧张了起来...
mysql提供的模式匹配的其他类型是使用扩展正则表达式。 当你对这类模式进行匹配...
有许多命令行选手在linux下开发的时候会经常遇到一个问题,无论是svn还是git,提...
1. 始终在 `v-for` 中使用 `:key` 在需要操纵数据时,将key属性与v-for指令一起...
Java HashMap removeNode 方法 分析 源码分析仓库 https://github.com/HANXU2018...
官网连接 https://docs.rt-thread.org/#/rt-thread-version/rt-thread-standard/...