下载文档原格式
jQuery实现三级联动代码如下<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>三级联动</title><script src="../bootstrap/js/jquery-1.11.2.min.js"></script></head><body><select id="sheng"></select><select id="shi"></select><select id="qu"></select></body><script type="text/javascript">$(document).ready(function(e) {loadsheng();loadshi();loadqu();$("#sheng").click(function() {loadshi();loadqu();})$("#shi").click(function() {loadqu();})})function loadsheng() {var pcode = "0001";$.ajax({type: "POST",url: "sanjichuli.php",async: false,data: { pcode: pcode },dataType: "TEXT",success: function(data) {//alert(data);var hang = data.split("|");var str = "";for(var i = 0; i < hang.length; i++) {var lie = hang[i].split("^");str = str + "<option value='" + lie[0] + "'>" + lie[1] + "</option>";}$("#sheng").html(str);}});}function loadshi() {var pcode = $("#sheng").val();$.ajax({type: "POST",url: "sanjichuli.php",async: false,data: { pcode: pcode },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 = str + "<option value='" + lie[0] + "'>" + lie[1] + "</option>";}$("#shi").html(str);}});}function loadqu() {var pcode = $("#shi").val();$.ajax({type: "POST",url: "sanjichuli.php",async: false,data: { pcode: pcode },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 = str + "<option value='" + lie[0] + "'>" + lie[1] + "</option>"; }$("#qu").html(str);}});}</script></html>处理界⾯代码<?phpinclude("../DBDA.class.php");$db = new DBDA();$pcode = $_POST["pcode"];$sql = "select * from chinastates where parentareacode='{$pcode}'";echo$db->strquery($sql,1);实现效果如下。
三级联动使用Jquery实现城市三级数据联动的实例.txt21春暖花会开！如果你曾经历过冬天,那么你就会有春色！如果你有着信念,那么春天一定会遥远；如果你正在付出,那么总有一天你会拥有花开满圆.使用Jquery实现城市三级数据联动的实例View:<script type="text/javascript">$<document>.ready<function<> {GetByJquery<>;$<"#ddlProvince">.change<function<> { GetCity<> }>;$<"#ddlCity">.change<function<> { GetDistrict<> }>;}>;function GetByJquery<> {$<"#ddlProvince">.empty<>; //清空省份SELECT控件$.getJSON<"/ajax/GetProvinceList", function<data> {$.each<data, function<i, item> {$<"<option></option>">.val<item["ProvinceID"]>.text<item["ProvinceName"]>.appendTo<$<"#ddlProvince">>;}>;GetCity<>;}>;}function GetCity<> {$<"#ddlCity">.empty<>; //清空城市SELECT控件var url ="/ajax/GetCityList/" + $<"#ddlProvince">.val<>;$.getJSON<url, function<data> {$.each<data, function<i, item> {$<"<option></option>">.val<item["CityID"]>.text<item["CityName"]>.appendTo<$<"#ddlCity">>;}>;GetDistrict<>;}>;}function GetDistrict<> {$<"#ddlDistrict">.empty<>; //清空市区SELECT控件var url = "/ajax/GetDistrictList/" + $<"#ddlCity">.val<>;$.getJSON<url, function<data> {$.each<data, function<i, item> {$<"<option></option>">.val<item["DistrictID"]>.text<item["DistrictName"]>.appendTo<$<"#ddlDistrict">>;}>;}>;}</script><table><tr><td><select id="ddlProvince"/></td><td><select id="ddlCity"/></td><td><select id="ddlDistrict" /></td></tr></table>Controller :using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.Web.Mvc.Ajax;namespace MvcBBS.Controllers{public class AjaxController : Controller{//// GET: /Ajax//// <summary>/// 获取所有［省份］数据/// </summary>public ActionResult GetProvinceList<>{if <!Request.IsAjaxRequest<>>{return Content<"请不要非法方法,这是不道德的行为！">;}BLL.Province bll = new MvcBBS.BLL.Province<>;List<MvcBBS.Model.S_Province> modellist = bll.GetProvinceList<>;return Json<modellist>;}/// <summary>/// 获取某［省份］的所有［城市］数据/// </summary>public ActionResult GetCityList<int id>{if <!Request.IsAjaxRequest<>>{return Content<"请不要非法方法,这是不道德的行为！">;}BLL.Province bll = new MvcBBS.BLL.Province<>;List<MvcBBS.Model.S_City> modellist = bll.GetCityList<id>;return Json<modellist>;}/// <summary>/// 获取某［城市］的所有［市区］数据/// </summary>public ActionResult GetDistrictList<int id>{if <!Request.IsAjaxRequest<>>{return Content<"请不要非法方法,这是不道德的行为！">;}BLL.Province bll = new MvcBBS.BLL.Province<>;List<MvcBBS.Model.S_District> modellist = bll.GetDistrict<id>;return Json<modellist>;}}}我比较喜欢使用三层＋工厂模式来读写数据,O/R Mapping不太适合我的要求！我们写的项目经常不是为了方便移植,而是选择明确的数据库,需要更高的性能,更强的业务逻辑！大家看到上面的代码,应该很熟悉,从数据库读数据到List<>中返回,并使有 MVC内置的Json 方法转换数据并Response．DAL:// BLL,Model就不贴出来了！using System;using System.Data;using System.Text;using System.Data.SqlClient;using System.Collections.Generic;using DBUtility; //请先添加引用namespace MvcBBS.DAL{public class Province{public Province<>{}/// <summary>/// 获取所有省份数据/// </summary>/// <returns></returns>public List<Model.S_Province> GetProvinceList<>{StringBuilder strSql = new StringBuilder<>;strSql.Append<"SELECT ProvinceID,ProvinceName ">;strSql.Append<" FROM S_Province ">;List<Model.S_Province> modelList = newList<MvcBBS.Model.S_Province><>;SqlDataReader dr = DbHelperSQL.ExecuteReader<strSql.ToString<>>; while <dr.Read<>>{Model.S_Province _model = new MvcBBS.Model.S_Province<>;_model.ProvinceID = int.Parse<dr["ProvinceID"].ToString<>>;_model.ProvinceName = dr.GetString<1>;modelList.Add<_model>;}dr.Close<>;return modelList;}/// <summary>/// 获取某省份的所有城市数据/// </summary>/// <param name="ProvinceID"></param>/// <returns></returns>public List<Model.S_City> GetCityList<int ProvinceID>{StringBuilder strSql = new StringBuilder<>;strSql.Append<"SELECT CityID,CityName,ZipCode">;strSql.Append<" FROM S_City ">;strSql.Append<" WHERE ProvinceID=">;strSql.Append<ProvinceID.ToString<>>;List<Model.S_City> modelList = new List<MvcBBS.Model.S_City><>;SqlDataReader dr = DbHelperSQL.ExecuteReader<strSql.ToString<>>;while <dr.Read<>>{Model.S_City _model = new MvcBBS.Model.S_City<>;_model.CityID = int.Parse<dr["CityID"].ToString<>>;_model.CityName = dr.GetString<1>;_model.ZipCode = dr.GetString<2>;_model.ProvinceID = ProvinceID;modelList.Add<_model>;}dr.Close<>;return modelList;}/// <summary>/// 获取某城市的所有市区/// </summary>/// <param name="CityID"></param>/// <returns></returns>public List<Model.S_District> GetDistrict<int CityID>{StringBuilder strSql = new StringBuilder<>;strSql.Append<"SELECT DistrictID,DistrictName">;strSql.Append<" FROM S_District ">;strSql.Append<" WHERE CityID=">;strSql.Append<CityID.ToString<>>;List<Model.S_District> modelList = new List<MvcBBS.Model.S_District><>;SqlDataReader dr = DbHelperSQL.ExecuteReader<strSql.ToString<>>;while <dr.Read<>>{Model.S_District _model = new MvcBBS.Model.S_District<>;_model.DistrictID = int.Parse<dr["DistrictID"].ToString<>>; _model.DistrictName = dr.GetString<1>;_model.CityID = CityID;modelList.Add<_model>;}dr.Close<>;return modelList;}}}。
题目：thinkphp jquery与ajax实现省市区三级联动菜单thinkphp jquery与ajax实现省市县三级联动菜单本示例以省市区三级联动菜单为例：实现步骤：第一：先默认从数据库中读取所有的省份。
第二：通过jquery中的change事件，当省份的内容发生改变时，执行change事件，通过jquery 获得被选中的省份的value值，再后通过异步加载数据。
第三：与第二步相似，当用户选择城市时，会触发change事件，通过jquery 获得被选中的城市的value值，再次进行异步加载数据。
具体示例代码如下：RecruitmentAction.class.phpclass RecruitmentAction extends Action{public function chacity(){$code=I(post.code$city=M(where(array(provincecode$code))-select();echo "option value=请选择城市/optionif($city){foreach($city as $c){echo "option value=".$c[".$c[/optionpublic function chaarea(){ $code=I(post.code$area=M(where(array(citycode$code))-select();echo "option value=/optionif($area){foreach($area as $a){echo "option value=".$a[".$a[/optionpublic function chacitydefault(){ $code=I(post.code$city=M(where(array(provincecode$code))-select();if($city){foreach($city as $c){echo "option value=".$c[".$c[public function chaareadefault(){$code=I(post.code$area=M(where(array(citycode$code))-select();if($area){foreach($area as $a){echo "option value=".$a[".$a[/optionsendrecruitment.phpmeta charset="utf-8"/title省市县三级联动菜单/tiltescirpt src="/jquery/1.11.1/jquery.min.js"script$(function(){#sheng).change(function(){ var code=$(#sheng option:selected ).val();$.post(__URL__/chacity:code},function(data){ #city).html(data);#city).change(function(){ var code=$(#city option:selected ).val();$.post(__URL__/chaarea:code},function(data){).html(data);var code=$(#sheng option).eq(0).val();$.post(__URL__/chacitydefault:code},function(data){#city).html(data);var areacode=110100; $.post(__URL__/chaareadefault :areacode},function(data){ #area).html(data);/script/head$m=M(province$p=$m-id ascselect();input type="text" name="jobplace" value="" /select name="job_province" id="sheng" style="width:100px;"if($p){foreach($p as $v){option value="php echo $v[php echo $v[/option/selectselect name="job_city" id="city" style="width:100px;"/selectselect name="job_area" id="area" style="width:100px;"/select/body/html注：本示例中，控制器部分：chacitydefault()，chaareadefault()方法是为了默认页面加载时，执行一次，让省，市，与区进行显示。
jQuery实现简单三级联动效果本⽂实例为⼤家分享了jQuery实现简单三级联动的具体代码，供⼤家参考，具体内容如下⾸先写⼀个JSON数据[{"province": "吉林省","cities": [{"city": "长春市","counties": ["朝阳区", "经济开发区", "⾼新区"]},{"city": "吉林市","counties": ["东城区", "经济开发区", "⽼城区"]},{"city": "⽩⼭市","counties": ["⼆道区", "河东区", "⾼新区"]}]},{"province": "辽宁省","cities": [{"city": "沈阳市","counties": ["朝阳区", "经济开发区", "⾼新区"]},{"city": "⼤连市","counties": ["东城区", "经济开发区", "⽼城区"]},{"city": "铁岭市","counties": ["⼆道区", "河东区", "⾼新区"]}]},{"province": "⼭东省","cities": [{"city": "青岛市","counties": ["朝阳区", "经济开发区", "⾼新区"]},{"city": "济南市","counties": ["东城区", "经济开发区", "⽼城区"]},{"city": "威海市","counties": ["⼆道区", "河东区", "⾼新区"]}]}]然后⽤Ajax动态获取JSON⽂件中的数据完整代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>三级联动</title></head><body><!-- 三级联动 - 两个⼆级联动 --><select id="province"><option value="">---</option></select><select id="city"><option value="">---</option></select><select id="county"><option value="">---</option></select><script src="js/jquery-1.12.4.js"></script><script src="../js/createXMLHttpRequest.js"></script><script>var $province = $("#province");var $city = $("#city");var $county = $("#county");var json;$.getJSON("data/server1.json", function (data) {// 把data保存到json全局变量中json = data;// 遍历data数据$.each(data, function (index, obj) {// 获取所有的省份信息var provinceName = obj.province;// console.log(provinceName);// 将省份信息添加到对应的select元素中$province.append(`<option value="${provinceName}">${provinceName}</option>`);});$province.change(function () {// 将城市下拉列表的选项清空$city.empty();$city.append(`<option value="">---</option>`);// 获取到所选择的城市的⽂本信息var provinceElementName = $(this).children("option:selected").text();// console.log(provinceElementName);$.each(json, function (index, obj) {var provinceName = obj.province;// console.log(provinceName);if (provinceElementName === provinceName) {// 获取到城市数组集合var cities = obj.cities;// 遍历城市数组集合$.each(cities, function (index, obj) {// console.log(obj.city);// 获取到城市名称var cityName = obj.city;// 将该省对应的城市名称添加到对应的select中$city.append(`<option value="${cityName}">${cityName}</option>`);});}});});$city.change(function () {// 将区级下拉列表的选项清空$county.empty();$county.append(`<option value="">---</option>`);// 获取到所选择的城市的⽂本信息var cityElementName = $(this).children("option:selected").text();// console.log(cityElementName);$.each(json, function (index, obj) {// 获取该省对应的所有的城市信息var cities = obj.cities;// console.log(cities);$.each(cities, function (index, cityObj) {// console.log(cityObj.city);var cityName = cityObj.city;if (cityElementName === cityName) {// 获取到区级数组集合// console.log(cityObj.counties);var counties = cityObj.counties;// 遍历区级数组集合$.each(counties, function (index, value) {// 获取到区级名称// console.log(value);// 将该城市对应的区级名称添加到对应的select元素中$county.append(`<option value="${value}">${value}</option>`);});}});});});});</script></body></html>效果如下以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
JQ三级联动的写法今天和⼤家分享下三级联动的写法思路：1.通过AJAX获取到json⽂件⾥的数据,GET⽅法 2.在获取到的数据⾥找到省份添加到下拉菜单中 3.当省份标签被改变时change事件通过当前省份与市的共同数组下标找到对应的市区；实例：HTML<!DOCTYPE html><html><head><script src="js/jquery-3.3.1.js"></script><meta charset="UTF-8"><title></title></head><body><select id="province">//创建省份下拉菜单<option>--省份--</option></select><select id="city">//创建市下拉菜单<option>--市--</option></select><select id="code">//创建邮编下拉菜单<option>--邮编--</option></select></body></html> JQ 第⼀级联动省份<script>//----------------------------联动第⼀级-------------------------------------------------------$.get("js/city.json",function(data,status){//通过GET⽅法获取到json⽂件⾥的数据$(data.城市代码).each(function(i,el){ //通过JQ循环遍历数据var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中 $("#province").append(str);//添加option标签})})</script> 第⼆级联动市区：当省级下拉菜单被改变时触发change事件实现⼆级联动<script>$.get("js/city.json",function(data,status){//通过GET⽅法获取到json⽂件⾥的数据var provinceId = null;//纪录共同的数组下标值//----------------------------联动第⼀级-------------------------------------------------------$(data.城市代码).each(function(i,el){ //通过JQ循环遍历数据var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中 $("#province").append(str);//添加option标签});//----------------------------联动第⼆级-------------------------------------------------------$("#province").change(function(){//当省级下拉菜单被改变触发change事件$("#city").html("<option>--市--</option>");//当省级下拉菜单被改变时清空市级下拉菜单$("#code").html("<option>--邮编--</option>");//当省级下拉菜单被改变时清空邮编下拉菜单provinceId = $("#province").val();//获取到省和市的共同数组下标$(data.城市代码[provinceId].市).each(function(index,ele){//循环共同数组的市var str = "<option>" + ele.市名 + "</option>"//把data的市数据添加到下拉菜单中$("#city").append(str);//添加option标签})});</script> 第三级联动邮编：当市级级下拉菜单被改变时触发change事件实现三级联动<script>$.get("js/city.json",function(data,status){//通过GET⽅法获取到json⽂件⾥的数据var provinceId = null;//纪录共同的数组下标值//----------------------------联动第⼀级-------------------------------------------------------$(data.城市代码).each(function(i,el){ //通过JQ循环遍历数据var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中 $("#province").append(str);//添加option标签});//----------------------------联动第⼆级-------------------------------------------------------$("#province").change(function(){//当省级下拉菜单被改变触发change事件$("#city").html("<option>--市--</option>");//当省级下拉菜单被改变时清空市级下拉菜单$("#code").html("<option>--邮编--</option>");//当省级下拉菜单被改变时清空邮编下拉菜单provinceId = $("#province").val();//获取到省和市的共同数组下标$(data.城市代码[provinceId].市).each(function(index,ele){//循环共同数组的市var str = "<option>" + ele.市名 + "</option>"//把data的市数据添加到下拉菜单中$("#city").append(str);//添加option标签})});//----------------------------联动第三级-------------------------------------------------------$("#city").change(function(){$("#code").html("");$(data.城市代码[provinceId].市).each(function(index,ele){if($("#city").val()==ele.市名){console.log(ele.编码);var str = "<option>" + ele.编码 + "</option>"//把data的省份数据添加到下拉菜单中$("#code").append(str);//添加option标签}})})})</script>。
jQuery实现三级联动<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><meta charset="utf-8"/><script src="/jquery/2.0.0/jquery.js"></script><style type="text/css">body {font-size:13px;text-align:center;}div {width:400px;border:1px solid #000000;background-color:#f5e8e8;margin:100px 300px;padding:10px;}</style><script type="text/javascript">$(function () {function Init(node) {return node.html("<option>---请选择---</option>");} //多维数组做数据来源var db = {腾讯: {LOL: "德玛,EZ瑞尔,剑圣",BNS: "⽓功师,⼒⼠,刺客,⽓宗师",DNF:"A,B,C,D"},阿⾥巴巴: {APPLAY: "AL,EZ瑞尔,剑圣",HUABEI: "AL,⼒⼠,刺客,⽓宗师",JIEBEI: "AL,B,C,D"},百度: {ggs: "BD,EZ瑞尔,剑圣",BD: "BD,⼒⼠,刺客,⽓宗师",BDBD: "BD,B,C,D",}}; //初始化select节点$.each(db, function (changShang) {$("#selF").append("<option>" + changShang + "</option>");})//⼀级变动$("#selF").change(function () {//清空⼆三级Init($("#selB"));Init($("#selC"));$.each(db,function (cs,pps) {if ($("#selF option:selected").text() == cs) {$.each(pps, function (pp, xhs) {$("#selB").append("<option>" + pp + "</option>");});$("#selB").change(function () {Init($("#selC"));$.each(pps, function (pp,xhs) {if ($("#selB option:selected").text()==pp) {$.each(xhs.split(','), function () {$("#selC").append("<option>" + this + "</option>");})}})})}})})})</script></head><body><div class="bg-primary"><hr />企业：<select id="selF"><option>---请选择---</option></select>产品：<select id="selB"><option>---请选择---</option></select>嗯嗯：<select id="selC"><option>---请选择---</option> </select><p id="pid"></p></div></body></html>。
【插件功能】jq_area地区三级联动插件：功能就如插件名显而易见嘛。
【原理】通过循环遍历数组生成相应的option元素。
【演示地址】/jquery_plugs/jq_area/index.html【插件参数】url 数据读取AJAX地址:功能尚未开发cache 城市数据,默认region.js文件provinceId 省份字段ID,默认#provincecityId 城市字段ID,默认#citycountyId 区县字段ID,默认#county【代码】// 基于JQ的地区三级联动//region.js为城市数据文件，调用时需要给cache赋值,如$("#area").area({cache:region}); // 创建一个闭包(function($) {//插件主要内容$.fn.area = function(options) {// 处理默认参数var opts = $.extend({}, $.fn.area.defaults, options);// 保存JQ的连贯操作return this.each(function(){getProvinces();$(opts.provinceId).change(function(){getCities();});$(opts.cityId).change(function(){getCounties();});});//ajax获取地区数据function getData(){//可以通过AJAX把地区数据读取到opts.cache中,数据格式为/*{"provinces2":{"region_id":"2","region_name":"\u5317\u4eac","city":{"cities52":{"region_id":"52","region_name" :"\u5317\u4eac","county":{"counties500":{"region_id":"500","region_name":"\u4e1c\u57ce\u533a"}}} 是一个三维数组的json数据,provinces2为省的id加provinces前缀作为key值;每个省数据中有city城市数据数组,每个城市数据中有county县数据数组*/ }//获取省数据function getProvinces(){var pro = "";$.each(opts.cache, function(i,item){pro += "<option value="+item.region_id+">" + item.region_name + "</option>";});$(opts.provinceId).empty().append(pro);getCities();}//获取城市数据function getCities(){var proIndex = $(opts.provinceId).val();showCities(proIndex);getCounties();}//显示城市数据function showCities(proIndex){var cit = "";if(opts.cache["provinces"+proIndex].city == null){$(opts.cityId).empty();return;}$.each(opts.cache["provinces"+proIndex].city, function(i,item){cit += "<option value="+item.region_id+">" + item.region_name+ "</option>";});$(opts.cityId).empty().append(cit);}//获取县数据function getCounties(){var proIndex = $(opts.provinceId).val();var citIndex = $(opts.cityId).val();showCounties(proIndex,citIndex);}//显示县数据function showCounties(proIndex,citIndex){var cou = "";if(opts.cache["provinces"+proIndex].city["cities"+citIndex].county == null){$(opts.countyId).empty();return;}$.each(opts.cache["provinces"+proIndex].city["cities"+citIndex].county,function(i,item){ cou += "<option value="+item.region_id+">" + item.region_name+ "</option>";});$(opts.countyId).empty().append(cou);}};//插件主要内容结束// 插件的defaults$.fn.area.defaults = {url:'',cache:'',//地区数据provinceId:'#province',cityId:'#city',countyId:'#county'};// 闭包结束})(jQuery);。
HTML代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional/ZEN" ""><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link href="city.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript" src="1.js"></script></head><body ><div id="cityDiv"><a class="aCity" id="aPro" > 请选择省</a><a class="aCity" id="aCity"> 请选择市</a><a class="aCity" id="aArea"> 请选择区县</a></div></body></html>JavaScript代码如下：/** $.get()或$.post()方法来解析xml文件* * url ：指定要解析的xml文件的路径* * callback :回调函数，function(xml)(}* * xml :解析xml文件返回的内容*/$.get("area.xml", function (xml) (var docXml = xml;var $provinceElements = $(docXml).find("province");var $proEle = $("#cityDiv"); //a 链接的divvar $divEle = $("<div class='dropdown_window' id='divPro'></div>");var $divEleCity = $("<div class='dropdown_window' style='margin-left:66px;' id='divCity'></div>");var $divEleArea = $("<div class='dropdown_window' style='margin-left:144px;' id='divArea'></div>");〃遍历所有的省，写到第一个div中$provinceElements.each(function (index, domEle) (var $provinceValue = $(domEle).attr("name”); // 获得省的值//创建span标签var $optionElement = $("<a class='ziduan' href='javascript:void(0);' ></a>");// $optionElement.attr("value”,$provinceValue);$optionElement.text($provinceValue);//创建div$divEle.append($optionElement);})；$("#aPro").click(function () (〃先把市，区隐藏起来$("#divCity").hide();$("#divArea").hide();// alert($("#divPro"));$proEle.after($divEle);var $divPro = $("#divPro");// 获得div,判断是否显示if($divPro.is(":hidden")){//如果省的div被隐藏，让他显示$divPro.attr("style”,"display:block;");}});〃给省添加click事件，获得选中的值，并显示在$(".ziduan").live('click',function () {var $clickPro = $(this).text();// 获得点击的省的名称〃赋值给省a标签$("#aPro").text($clickPro);//隐藏div$("#divPro").hide();〃创建市的divvar $clickPro = $("#aPro").text();//获得市div中的内容，清空$("#divCity").html("");//市页面上的a标签中的内容变为请选择市$("#aCity").text("请选择市");//获得区div中的内容，清空$("#divArea").html("");//市页面上的a标签中的内容变为请选择市$("#aArea").text("请选择区县");//遍历省，找到与选中值相同的，得到所有的市var $flag = true;$provinceElements.each(function (index, domEle) {var $provinceValue = $(domEle).attr("name");if($flag){if ($clickPro == $provinceValue) {$flag = false;var $cityElements = $(domEle).find("city");//遍历市$cityElements.each(function (index, domEle){var $cityValue = $(domEle).attr("name");//创建option标签var $optionElement = $("<a class='ziduanCity' href='javascript:void(0);' ></a>"); // $optionElement.attr("value”,$p rovinceValue);$optionElement.text($cityValue);//创建div$divEleCity.append($optionElement);});}}});});〃点击市，弹出下拉框$("#aCity").click(function(){〃先把省，区隐藏起来$("#divPro").hide();$("#divArea").hide();//获得省的内容，如果没有选择就不显示divvar $clickPro = $("#aPro").text();if($clickPro.indexOf('请选择省’)<0){//已经选择了省var $divCity = $("#divCity");// 获得div,判断是否显示//alert($divCity); if($divCity.is(":hidden")){// 如果省的div被隐藏，让他显示$divCity.attr("style”,"margin-left:66px;display:block;");}//添加到body中$proEle.after($divEleCity);}});〃给市添加click事件，获得选中的值，并显示在页面$(".ziduanCity").live('click',function () {var $clickCity = $(this).text();// 获得点击的市的名称〃赋值给市a标签$("#aCity").text($clickCity);//隐藏div$("#divCity").hide();var $clickCity = $(this).text();// 获得点击的市的名称var $clickPro = $("#aPro").text();// 获得省//获得区div中的内容，清空$("#divArea").html("");//市页面上的a标签中的内容变为请选择市$("#aArea").text("请选择区县");//遍历省，找到与选中值相同的，得到所有的市var $flag = true;$provinceElements.each(function (index, domEle) {var $provinceValue = $(domEle).attr("name");if ($clickPro == $provinceValue) (var $cityElements = $(domEle).find("city");$cityElements.each(function (index, domEle) (var $cityValue = $(domEle).attr("name");if ($clickCity == $cityValue) (var $countyElements = $(domEle).find("county");$countyElements.each(function (index, domEle) (var $countyValue = $(domEle).attr("name");var $optionElement = $("<a class='ziduanErea' href='javascript:void(0);' ></a>"); // $optionElement.attr("value”,$provinceValue);$optionElement.text($countyValue);〃创建div$divEleArea.append($optionElement);});}});}});});$("#aArea").click(function(){〃先把省市隐藏起来$("#divPro").hide();$("#divCity").hide();〃获得省的内容，如果没有选择就不显示divvar $clickPro = $("#aPro").text();var $clickCity = $("#aCity").text();if($clickPro.indexOf('请选择省')<0 && $clickCity.indexOf(' 请选择市')<0 ){ var $divArea = $("#divArea");// 获得div,判断是否显示//alert($divCity);if($divArea.is(":hidden")){// 如果省的div被隐藏，让他显示$divArea.attr("style”,"margin-left:144px;display:block;");}〃添加到body中$proEle.after($divEleArea);}});〃给区添加click事件，获得选中的值，并显示在页面上$(".ziduanErea").live('click',function () {〃先把省，市隐藏起来var $clickArea = $(this).text();// 获得点击的区的名称〃赋值给省a标签$("#aArea").text($clickArea);//隐藏div$("#divArea").hide();})；})；CSS代码如下：(margin:0;padding:0;}.dropdown_window{background-color: #FFFFFF;border: 1px solid #CBE3F7;margin: 0;padding: 7px 0 15px 15px;width: 257px;overflow:hidden;}.aCity{background:url(xiala.jpg) no-repeat scroll right top transparent; border: 1px solid #7F9DB9;color: black;cursor: pointer;font-size: 12px;height: 12px;line-height: 18px;margin: 0;padding: 4px 25px 2px 7px;text-decoration: none;}.ziduan{width:64px;height:24px;color: #004B91;text-decoration: none;font-size:12px;line-height:24px;text-align:center;display:block;float:left;}.ziduan:hover{color:#F60;text-decoration:underline;}.ziduanCity( height:24px; color: #004B91;text-decoration: none;font-size:12px;line-height:24px;text-align:center;display:block;float:left;margin-left:5px;margin-right:5px;}.ziduanCity:hover{ color:#F60; text-decoration:underline;}.ziduanErea{ width:auto; height:24px;color: #004B91;text-decoration: none;font-size:12px;line-height:24px;text-align:center;display:block;float:left;margin-left:5px;margin-right:5px;}.ziduanErea:hover{ color:#F60; text-decoration:underline;}更多信息请查看IT技术专栏。
省市区三级联动HTML<div class="am-form-content address"> <select name="province" id="province" onchange="loadRegion('province',2,'city');"><option value="0" selected>省份/直辖市</option>{volist name="province" id="vo"} <option value="{$vo.id}" >{$}</option>{/volist}</select><select name="city" id="city" onchange="loadRegion('city',3,'town');"><option value="0">市/县</option></select><select name="town" id="town"><option value="0">镇/区</option></select></div>⽅法public function address(){$where['uid']=cookie('id');$sql=db('ress')->field('a.*, as shengnamne, as shiname , as qname') ->where($where)->alias('a')->join('tree b','a.sheng=b.id')->join('tree c','a.shi=c.id')->join('tree d','a.qu=d.id')->select();// var_dump($sql);if($sql){$this->assign('sql',$sql);}else{$this->assign('sql','');}//三级联动上⾯与三级联动没关系$province = Db('tree')->where ( array('pid'=>1) )->select ();//进⼊页⾯直接查询省并赋值到页⾯ $this->assign('province',$province);return $this->fetch();}//三级联动public function getRegion(){$map['pid']=$_REQUEST["pid"];//查询⽗id$map['type']=$_REQUEST["type"];//查询那⼀级// $list=$Region->where($map)->select();$list = db('tree')->where($map)->select();// echo json_encode($list);return $list;}<!-- 省市区三联动 js --><script>function loadRegion(sel,type_id,selName,url="{:url('Index/getRegion')}"){jQuery("#"+selName+" option").each(function(){jQuery(this).remove();});// jQuery("<option value=0>请选择</option>").appendTo(jQuery("#"+selName));$('#'+selName).append('<option value=0>请选择</option>');if(jQuery("#"+sel).val()==0){return;}$.ajax({url:url,data:{pid:jQuery("#"+sel).val(),type:type_id},dataType:'json',type:'get',success:function(data){if(data){jQuery.each(data,function(idx,item){jQuery("<option value="+item.id+">"++"</option>").appendTo(jQuery("#"+selName)); });}else{jQuery("<option value='0'>请选择</option>").appendTo(jQuery("#"+selName));}}})jQuery.getJSON(url,{pid:jQuery("#"+sel).val(),type:type_id},function(data){if(data){jQuery.each(data,function(idx,item){jQuery("<option value="+item.id+">"++"</option>").appendTo(jQuery("#"+selName)); });}else{jQuery("<option value='0'>请选择</option>").appendTo(jQuery("#"+selName));}});}</script>数据库。
jquery+ajax实现省市区三级联动（封装和不封装两种⽅式）⾸先，要实现如下图效果，1、要理清思路：先做出三个下拉菜单----根据第⼀个下拉菜单的value值获取第⼆个下拉列表的内容，第三个同理。
2、⽤到的数据库表：Chinastates表规律：根据国家级（中国）的areacode查询省级(如：北京) ; 根据省级的areacode查询市级（如：北京市辖）；根据市级的areacode查询区级（如东城区）第⼀种⽅式：没有⽤到封装，数据读取较慢，可以看看原理，这样在第⼆种⽅式封装时就容易多了。
代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="../jquery-1.11.2.min.js"></script></head><body><select id="sheng"></select><select id="shi"></select><select id="qu"></select></body></html><script type="text/javascript">$(document).ready(function(e){//输出省var code = "0001";$.ajax({async:false,//取消异步url:"chuli.php",data:{code:code},type:"POST",dataType:"TEXT",success:function(data){var hang = data.trim().split("|"); //trim()去空格var str="";for(var i=0;i<hang.length;i++){var lie = hang[i].split("^");str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#sheng").html(str);}});//输出市$("#sheng").click(function(){var code2=$("#sheng").val();$.ajax({async:false,url:"chuli.php",data:{code:code2},type:"POST",dataType:"TEXT",success:function(data2){var hang2 = data2.trim().split("|");var str2 ="";for(var i=0;i<hang2.length;i++){var lie2=hang2[i].split("^");str2 = str2 +"<option value ='"+lie2[0]+"'>"+lie2[1]+"</option>";}$("#shi").html(str2);}});})//输出区县$("#shi").click(function(){var code3=$("#shi").val();$.ajax({async:false,url:"chuli.php",data:{code:code3},type:"POST",dataType:"TEXT",success:function(data3){var hang3 = data3.split("|");var str3 ="";for(var i=0;i<hang3.length;i++){var lie3=hang3[i].split("^");str3 = str3 +"<option value ='"+lie3[0]+"'>"+lie3[1]+"</option>";}$("#qu").html(str3);}});})})</script> 期间出现的问题：每个下拉列表的第⼀个数据输不出来：是因为每个下拉列表的第⼀个数据的value值都带有空格所以在输出data时要去空格data返回的值可能带有空格换⾏等，所以要⽤trim()⽅法去空格第⼆种⽅式：封装成插件，以后可以随时调⽤（重要）（1）主页⾯：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><br>//引⼊jquery包<script src="../jquery-1.11.2.min.js"></script><br>//引⽤我们⾃⼰封装的js⽂件<script src="sanji.js"></script></head><body><br>//id要与封装的js插件中⼀致<div id="sanji"></div></body></html>（2）我们⾃⼰封装的js插件$(document).ready(function(e){//扔三个下拉列表到主页⾯建的div中$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //加载省的数据LoadSheng();//加载市的数据LoadShi();//加载区的数据LoadQu();//给省的下拉列表添加点击事件，当省变化时，对应的市和区会发⽣变化$("#sheng").click(function(){LoadShi();LoadQu();})//给市的下拉列表添加点击事件，当市变化时，对应的区发⽣变化$("#shi").click(function(){LoadQu();})});//加载省的下拉列表function LoadSheng() {var pcode = "0001";$.ajax({async: false,url: "chuli.php",data: { code: pcode },type: "POST",dataType: "TEXT",success: function(data) {var hang = data.trim().split("|");var str = "";for(var i = 0; i < hang.length; i++) {var lie = hang[i].split("^");str = str + "<option value='" + lie[0] + "'>" + lie[1] + "</option>";}$("#sheng").html(str);}});}//加载市省的下拉列表function LoadShi() {var pcode = $("#sheng").val();$.ajax({async: false,url: "chuli.php",data: { code: pcode },type: "POST",dataType: "TEXT",success: function(data) {var hang = data.trim().split("|");var str = "";for(var i = 0; i < hang.length; i++) {var lie = hang[i].split("^");str = str + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";}$("#shi").html(str);}});}//加载省的下拉列表function LoadQu() {var pcode = $("#shi").val();$.ajax({url: "chuli.php",data: { code: pcode },type: "POST",dataType: "TEXT",success: function(data) {var hang = data.trim().split("|");var str = "";for(var i = 0; i < hang.length; i++) {var lie = hang[i].split("^");str = str + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";}$("#qu").html(str);}});} 其次就是处理页⾯(两种⽅法都⽤到的)：chuli.php<?php$code=$_POST["code"];require "DB.class.php";$db=new DB();$sql="select areacode,areaname from chinastates where parentareacode='{$code}'";$str=$db->strquery($sql);echo $str;最后就是封装的类⽂件：DB.class.phpfunction strquery($sql){$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);$result = $db ->query($sql);$arr =$result->fetch_all();$str="";foreach($arr as $v){$str=$str.implode("^",$v)."|";}$str = substr($str,0,strlen($str)-1);return $str;}}>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
