ajax地址三级联动下拉表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax地址三级联动下拉表相关的知识，希望对你有一定的参考价值。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jquery-2.0.0.js" type="text/javascript"> </script> <script src="address.js" type="text/javascript"></script> <script src="addressdata.js" type="text/javascript"></script> <script type="text/javascript" src="myscript.js"></script> <script> //调用插件 $(function() { $("#address").ProvinceCity(); }); </script> </head> <body>方法一 <div id="address"></div> 方法二 <table> <tr> <td align="right">所在地：</td> <td><select id="province"> <option>选择省份</option> </select> <select id="city"> <option>选择城市</option> </select> <select id="area"> <option>选择区域</option> </select></td> </tr> </table> </body> </html>
/**myscript.js * 地址下拉单三级联动 */ $(function(){ var $province=$("#province"); var $city=$("#city"); var $area=$("#area"); $.each(GP,function(index,data){ $province.append("<option value=‘"+data+"‘>"+data+"</option>"); }); var index1=""; $province.change(function(){ //清空市和区的下拉框 $city[0].options.length=1; $area[0].options.length=1; index1=this.selectedIndex;//获取当前选择的省的index if(index1!=0){//当选择的为"请选择时" //给市级下拉输入数据 $.each(GC[index1-1],function(index,data){ $city.append("<option value=‘"+data+"‘>"+data+"</option>"); }); } }); var index2=""; $city.change(function(){ //清空去的下拉框 $area[0].options.length=1; index2=this.selectedIndex;//获取当前选择的市的index $.each(GA[index1-1][index2-1],function(index,data){ $area.append("<option value=‘"+data+"‘>"+data+"</option>"); }); }); });
/**address.js * jQuery : 城市联动插件 * @example $("#address").ProvinceCity(); * @params 暂无 */ $.fn.ProvinceCity = function(){ var self = this; //定义3个默认值 self.data("province",["请选择", "请选择"]); self.data("city1",["请选择", "请选择"]); self.data("city2",["请选择", "请选择"]); //插入3个空的下拉框 self.append("<select></select>"); self.append("<select></select>"); self.append("<select></select>"); //分别获取3个下拉框 var $sel1 = self.find("select").eq(0); var $sel2 = self.find("select").eq(1); var $sel3 = self.find("select").eq(2); //默认省级下拉 if(self.data("province")){ $sel1.append("<option value=‘"+self.data("province")[1]+"‘>"+self.data("province")[0]+"</option>"); } $.each( GP , function(index,data){ $sel1.append("<option value=‘"+data+"‘>"+data+"</option>"); }); //默认的1级城市下拉 if(self.data("city1")){ $sel2.append("<option value=‘"+self.data("city1")[1]+"‘>"+self.data("city1")[0]+"</option>"); } //默认的2级城市下拉 if(self.data("city2")){ $sel3.append("<option value=‘"+self.data("city2")[1]+"‘>"+self.data("city2")[0]+"</option>"); } //省级联动 控制 var index1 = "" ; $sel1.change(function(){ //清空其它2个下拉框 $sel2[0].options.length=0; $sel3[0].options.length=0; index1 = this.selectedIndex; if(index1==0){ //当选择的为 “请选择” 时 if(self.data("city1")){ $sel2.append("<option value=‘"+self.data("city1")[1]+"‘>"+self.data("city1")[0]+"</option>"); } if(self.data("city2")){ $sel3.append("<option value=‘"+self.data("city2")[1]+"‘>"+self.data("city2")[0]+"</option>"); } }else{ $.each( GC[index1-1] , function(index,data){ $sel2.append("<option value=‘"+data+"‘>"+data+"</option>"); }); $.each( GA[index1-1][0] , function(index,data){ $sel3.append("<option value=‘"+data+"‘>"+data+"</option>"); }); } }).change(); //1级城市联动 控制 var index2 = "" ; $sel2.change(function(){ $sel3[0].options.length=0; index2 = this.selectedIndex; $.each( GA[index1-1][index2] , function(index,data){ $sel3.append("<option value=‘"+data+"‘>"+data+"</option>"); }); }); return self; };
以上是关于ajax地址三级联动下拉表的主要内容，如果未能解决你的问题，请参考以下文章
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能