省市區多級聯動js代碼（html地區三級聯動）

本文目錄一覽：

• 1、省市縣三級聯動菜單，JS全國省市縣(區)聯動，怎樣連接到資料庫啊？
• 2、省市區三級聯動下拉菜單應該怎麼寫
• 3、javascript實現二級聯動，比如連個下拉列表，一個選擇省份，另一個自動出現相應城市
• 4、jquery省市區三級聯動編輯時怎麼默認選中
• 5、如何用js實現省市區之間的三級聯動
• 6、怎樣用js實現在資料庫一張省市區表實現地區三級聯動

省市縣三級聯動菜單，JS全國省市縣(區)聯動，怎樣連接到資料庫啊？

給你一些思路：

1、省市縣的數據寫到資料庫中。每條數據會有一個父ID（上級ID）。

2、在頁面上省變動後，查詢市的數據以省的ID作為條件，縣也一樣，以市 的ID為條件。

第二種方法，

由於全國的這些基本上是固定的，一般變動比較少，這可以把這個數據寫到JS裡面，通過JS來實現。這個載入會快一些。這些數據可以到國家統計局的網站去下載。

省市區三級聯動下拉菜單應該怎麼寫

JS 省市區三級聯動：

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

titleJS 省市區三級聯動/title

/head

body

select id=”selProvince” name=”province”

/select

select id=”selCity” name=”city”

/select

select id=”selDist” name=”area”

/select

div/div

script type=”text/javascript”

var temp;

var P = new Array();

var C = new Array();

var D = new Array();

P = new Array(“北京”,”上海”,”天津”,”重慶”,”廣東”,”四川”,”浙江”,”貴州”,”遼寧”,”江蘇”,”福建”,”河北”,”河南”,” 吉林”,”黑龍江”,”山東”,”安徽”,”廣西”,”海南”,”內蒙古”,”山西”,”寧夏”,”甘肅”,”陝西”,”青海”,”湖北”,”湖南”,” 江西”,”雲南”,”新疆”,”香港”,”澳門”);

/*北京 */ C[0] = new Array(“北京”);

/*上海 */ C[1] = new Array(“上海”);

/*天津 */ C[2] = new Array(“天津”);

/*重慶 */ C[3] = new Array(“重慶”);

/*廣東 */ C[4] = new Array(“廣州”,”深圳”,”珠海”,”佛山”,”惠州”,”東莞”,”中山”,”江門”,”湛江”,”汕頭”);

/*四川 */ C[5] = new Array(“成都”,”自貢市”,”攀枝花”,”瀘州”);

/*浙江 */ C[6] = new Array(“杭州”,”寧波”,”嘉興”,”紹興”,”溫州”,”金華”,”衢州”,”舟山”,”台州”,”麗水”,”湖州”);

/*貴州 */ C[7] = new Array(“貴陽”);

/*遼寧 */ C[8] = new Array(“瀋陽”,”大連”);

/*江蘇 */ C[9] = new Array(“南京”,”蘇州”,”南通”,”無錫”,”鹽城”,”徐州”,”常州”,”連雲港”,”常熟”,”揚州”,”鎮江”,”泰州”,”崑山”,”吳江”);

/*福建 */C[10] = new Array(“福州”,”廈門”,”泉州”);

/*河北 */C[11] = new Array(“石家莊”,”唐山”,”邯鄲”,”保定”,”廊坊”,”衡水”,”秦皇島”);

/*河南 */C[12] = new Array(“鄭州”,”洛陽”);

/*吉林 */C[13] = new Array(“長春”,”吉林”);

/*黑龍江 */C[14] = new Array(“哈爾濱”);

/*山東 */C[15] = new Array(“濟南”,”青島”,”威海”,”煙台”,”濰坊”,”日照”,”臨沂”,”淄博”);

/*安徽 */C[16] = new Array(“合肥”,”蕪湖”,”馬鞍山”);

/*廣西 */C[17] = new Array(“南寧”,”桂林”,”北海”,”柳州”);

/*海南 */C[18] = new Array(“海南”,”三亞”);

/*內蒙古 */C[19] = new Array(“呼和浩特”,”包頭”);

/*山西 */C[20] = new Array(“太原”);

/*寧夏 */C[21] = new Array(“銀川”);

/*甘肅 */C[22] = new Array(“蘭州”);

/*陝西 */C[23] = new Array(“西安”);

/*青海 */C[24] = new Array(“西寧”);

/*湖北 */C[25] = new Array(“武漢”,”宜昌”);

/*湖南 */C[26] = new Array(“長沙”,”株洲”,”湘潭”);

/*江西 */C[27] = new Array(“南昌”,”贛州”);

/*雲南 */C[28] = new Array(“昆明”);

/*新疆 */C[29] = new Array(“烏魯木齊”);

/*香港 */C[30] = new Array(“香港”);

/*澳門 */C[31] = new Array(“澳門”);

/*台灣 */C[31] = new Array(“台北”);

for(temp in C)

{

D[temp] = new Array();

}

/*北京 */D[0][0] = new Array(“海淀區,朝陽區,東城區,西城區,崇文區,宣武區,丰台區,石景山,房山區,門頭溝,通州區,順義區,昌平區,密雲區,懷柔區,延慶區,平谷區,大興區,燕郊區”);

/*上海 */D[1][0] = new Array(“黃浦區、盧灣區、徐匯區、徐家匯、長寧區、靜安區、普陀區、閘北區 虹口區、楊浦區、寶山區、閔行區、嘉定區、浦東新區、松江區、金山區、青浦區、南匯區、奉賢區、崇明縣”);

/*天津 */D[2][0] = new Array(“和平,西青,北辰,大港,南開,河東,河西,河北,津南,紅橋,塘沽,漢沽,東麗,寶坻,薊縣,武清,寧河,靜海,開發區”);

/*重慶 */D[3][0] = new Array(“南岸,渝北,萬盛,大渡口,萬州,北碚,沙坪壩,巴南,雙橋,涪陵,江北,九龍坡,渝中”);

/*廣州 */D[4][0] = new Array(“荔灣,越秀,東山,天河,海珠,黃埔,芳村,白雲,花都,番禺,東莞,廣州經濟技術開發區,從化,增城,蘿崗,清遠,南沙,佛山”);

/*深圳 */D[4][1] = new Array(“福田,羅湖,南山,鹽田,寶安,龍崗”);

/*珠海 */D[4][2] = new Array(“斗門,橫琴,金灣,香洲,坦洲”);

/*佛山 */D[4][3] = new Array(“南海,順德,三水,高明,禪城”);

/*惠州 */D[4][4] = new Array(“博羅縣,大亞灣區,惠城區,惠東縣,惠陽區,龍門縣,仲愷區”);

/*東莞 */D[4][5] = new Array(“茶山,長安,常平,大朗,大嶺山,道?,東城,東坑,鳳崗,高?,莞城,洪梅,厚街,黃江,虎門,寮步,麻涌,南城,企石,橋頭,清溪,沙 田,石碣,石龍,石排,松山湖,塘廈,萬江,望牛墩,謝崗,樟木頭,中堂”);

/*中山 */D[4][6] = new Array(“東區,南區,西區,石岐區,南頭鎮,古鎮鎮,東鳳鎮,小欖鎮,黃圃鎮,三角鎮,民眾鎮,阜沙鎮,火炬區,港口鎮,東升鎮,橫欄鎮,沙溪鎮,大涌鎮,板芙鎮,五桂山鎮,南朗鎮,三鄉鎮,神灣鎮,坦洲鎮”);

/*江門 */D[4][7] = new Array(“新會區,蓬江區,江海區,台山市,恩平市,鶴山市,開平市”);

/*成都 */D[5][0] = new Array(“青羊,錦江,金牛,武侯,成華,龍泉驛,青白江,高新區,金堂縣,新都區,溫江區,郫縣,雙流縣,新津縣,大邑縣,都江堰市,崇州市,邛崍市,蒲江縣,彭州市,高新西區,高新西區”);

/*杭州 */D[6][0] = new Array(“上城,下城,西湖,拱墅,江干,濱江,餘杭,蕭山,富陽,桐廬,臨安,淳安,建德”);

/*寧波 */D[6][1] = new Array(“海曙,江東,江北,鄞州,鎮海,北侖,慈溪,餘姚,奉化,寧海,象山,高新區,東錢湖旅遊度假區”);

/*嘉興 */D[6][2] = new Array(“嘉善,平湖,海鹽,海寧,桐鄉,秀洲,南湖,市區,經濟開發區”);

/*紹興 */D[6][3] = new Array(“紹興縣,諸暨市,上虞市,新昌縣,越城區,嵊州市”);

/*貴陽 */D[7][0] = new Array(“雲岩,南明,金陽新區,小河,花溪,烏當,白雲,清鎮,開陽,修文,息烽,小河片,金陽”);

/*瀋陽 */D[8][0] = new Array(“和平,瀋河,皇姑,大東,鐵西,蘇家屯,東陵,新城子,於洪,新民,遼中,康平,法庫,渾南新區,沈北新區”);

/*大連 */D[8][1] = new Array(“西崗,中山,沙河口,甘井子,旅順口,金州,開發區,高新園區,長興島,普蘭店,瓦房店,庄河”);

/*南京 */D[9][0] = new Array(“白下,秦淮,玄武,鼓樓,下關,建鄴,江寧,六合,浦口,棲霞,雨花,大廠,溧水,高淳”);

/*蘇州 */D[9][1] = new Array(“園區,新區,平江,滄浪,金閶,虎丘,吳中,崑山,常熟,太倉,張家港,相城,吳江”);

/*南通 */D[9][2] = new Array(“城東區,城南區,城北區,城中區,狼山區,天生港,唐閘區,觀音山區,開發區,海安縣,如皋市,如東縣,通州,海門,啟東市,海門市,港閘,崇川”);

/*無錫 */D[9][3] = new Array(“崇安區,南長區,北塘區,新區,濱湖區,惠山區,馬山區,錫山區,江陰市,宜興市”);

/*鹽城 */D[9][4] = new Array(“鹽城,東台,大豐,鹽都,建湖,響水,阜寧,射陽,濱海”);

/*徐州 */D[9][5] = new Array(“豐縣,鼓樓,賈汪,金山橋開發區,沛縣,邳州市,泉山,睢寧市,新城區,雲龍,銅山區”);

/*常州 */D[9][6] = new Array(“金壇,溧陽,戚區,天寧,武進,新北,鐘樓”);

/*連雲港 */D[9][7] = new Array();

/*常熟 */D[9][8] = new Array();

/*揚州 */D[9][9] = new Array(“寶應市,廣陵區,高郵市,邗江區,江都市,開發區,維揚區,儀征市”);

/*鎮江 */D[9][10] = new Array(“丹陽市,句容市,揚中市,丹徒區,京口區,潤州區,鎮江新區”);

/*泰州 */D[9][11] = new Array(“城中區,城東區,城西區,城南區,城北區,高港區,泰興市,姜堰市,興化市,靖江市”);

/*崑山 */D[9][12] = new Array(“巴城鎮,澱山湖鎮,花橋鎮,錦溪鎮,陸家鎮,千燈鎮,玉山鎮,張浦鎮,周市鎮,周庄鎮”);

/*福州 */D[10][0] = new Array(“台江,鼓樓,倉山,晉安,馬尾,閩侯縣,長樂市”);

/*廈門 */D[10][1] = new Array(“開元,湖裡,思明,鼓浪嶼,集美,杏林,海滄,同安,翔安,漳州,龍岩,泉州”);

/*泉州 */D[10][2] = new Array(“豐澤區,安溪縣,德化縣,惠安縣,晉江市,鯉城區,洛江區,南安市,泉港區,石獅市,永春縣”);

/*石家莊 */D[11][0] = new Array(“橋東,橋西,新華,裕華,長安,開發區,正定,平山,鹿泉市,欒城,藁城”);

/*唐山 */D[11][1] = new Array(“曹妃甸工業區,丰南,豐潤,高新區,古冶,海港開發區,漢沽管理區,開平,樂亭縣,盧台開發區,路北,路南,灤南縣,灤縣,南堡開發區,遷安市,遷西縣,唐海縣,玉田縣,遵化市”);

/*邯鄲 */D[11][2] = new Array();

/*保定 */D[11][3] = new Array();

/*廊坊 */D[11][4] = new Array(“安次,廣陽,三河,霸州,香河,永清,固安,文安,大城,大廠”);

/*衡水 */D[11][5] = new Array(“桃城區,深州市,冀州市,安平縣,故城縣,阜城縣,景縣,棗強縣,武強縣,饒陽縣,開發區,武邑縣,郊區”);

/*秦皇島 */D[11][6] = new Array(“北戴河,昌黎縣,撫寧縣,海港,盧龍縣,青龍縣,山海關”);

/*鄭州 */D[12][0] = new Array(“金水,中原,管城,二七,邙山,惠濟,經濟技術開發區,鄭東新區”);

/*洛陽 */D[12][1] = new Array(“澗西區,西工區,老城區,?河區,洛龍區,吉利區,偃師市,欒川縣,孟津縣,咸陽縣,伊川縣,宜陽縣”);

/*長春 */D[13][0] = new Array(“朝陽,寬城,二道,南關,綠園,雙陽,其它,吉林地區,高新,經開,凈月,汽開”);

/*吉林 */D[13][1] = new Array(“昌邑區,船營區,龍潭區,豐滿區,永吉縣,舒蘭市,磐石市,蛟河市,樺甸市,經開區,高新區”);

/*哈爾濱 */D[14][0] = new Array(“道里,道外,南崗,動力,平房,香坊,太平,開發區,阿城,呼蘭,松北”);

/*濟南 */D[15][0] = new Array(“市中,天橋,歷下,槐蔭,歷城,長清,高新,濟陽,平陰,商河,章丘”);

/*青島 */D[15][1] = new Array(“市南,市北,四方,李滄,嶗山,城陽,黃島,即墨市,膠州市,膠南市,平度市,萊西市,開發區”);

/*威海 */D[15][2] = new Array(“環翠區,文登市,榮成市,乳山市,高區,經區”);

/*煙台 */D[15][3] = new Array(“芝罘區,福山區,龍口市,萊陽市,萊州市,蓬萊市,招遠市,萊山區,開發區,牟平區,棲霞市,海陽市,長島縣”);

/*濰坊 */D[15][4] = new Array(“奎文,濰城,寒亭,坊子,壽光市,高新技術開發區,經濟開發區”);

/*日照 */D[15][5] = new Array(“東港”);

/*臨沂 */D[15][6] = new Array(“蘭山”);

/*合肥 */D[16][0] = new Array(“中市,東市,西市,郊區,廬陽區,包河區,瑤海區,蜀山區,高新區,新站區,經開區,政務區,濱湖新區”);

/*南寧 */D[17][0] = new Array(“興寧,青秀,西鄉塘,江南,良慶,邕寧,桂林市,北海市,欽州市”);

/*桂林 */D[17][1] = new Array(“秀峰區,疊彩區,象山區,七星區,雁山區,西城區,八里街區”);

/*北海 */D[17][2] = new Array(“海城,銀海,鐵山港,合浦”);

/*海南 */D[18][0] = new Array(“海口市,三亞市,文昌市,瓊海市,萬寧市,儋州市,東方市,五指山市,保亭縣,洋浦經濟開發區,其他,定安縣,澄邁縣”);

/*呼和浩特*/D[19][0] = new Array(“回民,玉泉,新城,金川開發區,金橋開發區,金山開發區,如意開發區,賽罕,郊區,托克托,清水河,武川,和林格爾,土默特左旗”);

/*太原 */D[20][0] = new Array(“杏花嶺,小店,迎澤,尖草坪,萬柏林,晉源,榆次”);

/*銀川 */D[21][0] = new Array(“城區,新城,興慶區,金鳳區,西夏區,永定縣,賀蘭縣,靈武市”);

/*蘭州 */D[22][0] = new Array(“城關,七里河,西固,安寧,紅古,永登,榆中,皋蘭”);

/*西安 */D[23][0] = new Array(“城北,城南,城東,城內,城西,高新,長安,臨潼,藍田,閻良,灞橋,咸陽”);

/*西寧 */D[24][0] = new Array(“城中,城東,城西,城北,湟源,湟中,大通回族土族自治縣”);

/*武漢 */D[25][0] = new Array(“江漢,江岸,?口,漢陽,武昌,洪山,青山,東西湖,黃陂,江夏,陽邏,新洲,蔡甸,漢南,沌口”);

/*宜昌 */D[25][1] = new Array(“夷陵區,西陵區,伍家崗區,點軍區,?亭區,宜都市,當陽市,枝江市,東山開發區,遠安縣,興山縣,秭歸縣,長陽土家族自治縣,五峰土家族自治縣”);

/*長沙 */D[26][0] = new Array(“嶽麓,天心,雨花,開福,芙蓉,星沙,長沙經濟開發區”);

/*南昌 */D[27][0] = new Array(“東湖,西湖,青雲譜,灣里,昌北,高新開發區,紅谷灘,南昌縣,青山湖,新建縣,郊區,進賢,安義”);

/*昆明 */D[28][0] = new Array(“盤龍區,五華區,官渡區,西山區,安寧,呈貢,其他,東川”);

/*烏魯木齊*/D[29][0] = new Array(“天山,沙伊巴克,新市,水磨溝,頭屯河,南泉,東山”);

/*香港 */D[30][0] = new Array(“北區,大埔去,東區,觀塘區,黃大仙區,九龍城區,葵青區,離島區,南區,沙田區,屯門區,灣仔區,西貢區,油尖旺區,元朗區,中西區,荃灣區”);

/*台北 */D[31][0] = new Array();

///城市與省份的序列對應、每個城市與每個區域數組對應

//創建城市對象，返回一個該城市所在省份及所擁有區域的對象

function createCity(sCityName)

{

var oCity = new Object();

oCity.province = “”;

oCity.city = sCityName;

oCity.dist = new Array();

oCity.pindex = -1;//所屬省份在省份數組中的位置index

oCity.cindex = -1;//城市在所屬城市數組中的位置index（二者用來確定區域數組）

var m = -1;var n = -1;

for(var i = 0; i C.length; i++)

{

for(var j=0; j C[i].length; j++)

{

if(C[i][j] == sCityName)

{

oCity.province = P[i];

oCity.dist = D[i][j];

oCity.pindex = i;

oCity.cindex = j;

break;

}

}

if(oCity.province != “”)

{

break;

}

}

return oCity;

}

/*三級、省、市、區域*/

/*面向對象*/

function oMenu(selProvince,selCity,selDist)

{

///selProvince省份的select控制項id

///selCity城市的select控制項id

///selDist區域的select控制項id

this.oProvince = document.getElementById(selProvince);

///城市變化，初始化區域

function fnInitDist(city)

{

var objCity = createCity(city);

var dist = objCity.dist.toString().split(‘,’);

ClearSelect(selDist,”請選擇區域”);

InitSelect(selDist,dist,””);

};

///初始化城市

function fnInitCity(province)

{

for(var i = 0;i P.length;i++)

{

if(P[i] == province)

{

ClearSelect(selCity,”請選擇城市”);

InitSelect(selCity,C[i],””);

ClearSelect(selDist,”請先選擇城市”);

document.getElementById(selCity).onchange = function (){fnInitDist(this.value);};

break;

}

}

};

///初始化省份

this.fnInitProvince = function(){

InitSelect(selProvince,P,”請選擇省份”);

ClearSelect(selCity,”請先選擇省份”);

ClearSelect(selDist,”請先選擇城市”);

this.oProvince.onchange = function (){fnInitCity(this.value);};

};

///初始化select控制項

function InitSelect(obj,aInitValue,sMenu)

{

///obj:要初始化的select控制項對象的id

///aInitValue:要初始化的數組值

///sMenu:在select控制項頭部要添加的option，value為空；如果該參數為空，則只初始化aInitValue而不加頭部

if(sMenu != “”)

{

document.getElementById(obj).options.add(new Option(sMenu,””));

}

for(var i = 0; i aInitValue.length; i++)

{

document.getElementById(obj).options.add(new Option(aInitValue[i],aInitValue[i]));

}

}

function ClearSelect(obj,sMenu)

{

document.getElementById(obj).options.length = 0;

document.getElementById(obj).options.add(new Option(sMenu,””));

}

}

var oMenu = new oMenu(“selProvince”,”selCity”,”selDist”);//select ID

oMenu.fnInitProvince();

/script

/body

/html

javascript實現二級聯動，比如連個下拉列表，一個選擇省份，另一個自動出現相應城市

script language=vbScript

!–

public x(33)

x( 0 )=”東城,西城,崇文,宣武,朝陽,丰台,石景山,海淀,門頭溝,房山,通州,順義,昌平,大興,平谷,懷柔,密雲,延慶”

x( 1 )=”黃浦,盧灣,徐匯,長寧,靜安,普陀,閘北,虹口,楊浦,閔行,寶山,嘉定,浦東,金山,松江,青浦,南匯,奉賢,崇明”

x( 2 )=”和平,東麗,河東,西青,河西,津南,南開,北辰,河北,武清,紅撟,塘沽,漢沽,大港,寧河,靜海,寶坻,薊縣”

x( 3 )=”萬州,涪陵,渝中,大渡口,江北,沙坪壩,九龍坡,南岸,北碚,萬盛,雙撟,渝北,巴南,黔江,長壽,綦江,潼南,銅梁,大足,榮昌,壁山,梁平,城口,豐都,墊江,武隆,忠縣,開縣,雲陽,奉節,巫山,巫溪,石柱,秀山,酉陽,彭水,江津,合川,永川,南川”

x( 4 )=”石家莊,邯鄲,邢台,保定,張家口,承德,廊坊,唐山,秦皇島,滄州,衡水”

x( 5 )=”太原,大同,陽泉,長治,晉城,朔州,呂梁,忻州,晉中,臨汾,運城”

x( 6 )=”呼和浩特,包頭,烏海,赤峰,呼倫貝爾盟,阿拉善盟,哲里木盟,興安盟,烏蘭察布盟,錫林郭勒盟,巴彥淖爾盟,伊克昭盟”

x( 7 )=”瀋陽,大連,鞍山,撫順,本溪,丹東,錦州,營口,阜新,遼陽,盤錦,鐵嶺,朝陽,葫蘆島”

x( 8 )=”長春,吉林,四平,遼源,通化,白山,松原,白城,延邊”

x( 9 )=”哈爾濱,齊齊哈爾,牡丹江,佳木斯,大慶,綏化,鶴崗,雞西,黑河,雙鴨山,伊春,七台河,大興安嶺”

x( 10 )=”南京,鎮江,蘇州,南通,揚州,鹽城,徐州,連雲港,常州,無錫,宿遷,泰州,淮安”

x( 11 )=”杭州,寧波,溫州,嘉興,湖州,紹興,金華,衢州,舟山,台州,麗水”

x( 12 )=”合肥,蕪湖,蚌埠,馬鞍山,淮北,銅陵,安慶,黃山,滁州,宿州,池州,淮南,巢湖,阜陽,六安,宣城,亳州”

x( 13 )=”福州,廈門,莆田,三明,泉州,漳州,南平,龍岩,寧德”

x( 14 )=”南昌市,景德鎮,九江,鷹潭,萍鄉,新餘,贛州,吉安,宜春,撫州,上饒”

x( 15 )=”濟南,青島,淄博,棗莊,東營,煙台,濰坊,濟寧,泰安,威海,日照,萊蕪,臨沂,德州,聊城,濱州,菏澤”

x( 16 )=”鄭州,開封,洛陽,平頂山,安陽,鶴壁,新鄉,焦作,濮陽,許昌,漯河,三門峽,南陽,商丘,信陽,周口,駐馬店,濟源”

x( 17 )=”武漢,宜昌,荊州,襄樊,黃石,荊門,黃岡,十堰,恩施,潛江,天門,仙桃,隨州,咸寧,孝感,鄂州”

x( 18 )=”長沙,常德,株洲,湘潭,衡陽,岳陽,邵陽,益陽,婁底,懷化,郴州,永州,湘西,張家界”

x( 19 )=”廣州,深圳,珠海,汕頭,東莞,中山,佛山,韶關,江門,湛江,茂名,肇慶,惠州,梅州,汕尾,河源,陽江,清遠,潮州,揭陽,雲浮”

x( 20 )=”南寧,柳州,桂林,梧州,北海,防城港,欽州,貴港,玉林,南寧地區,柳州地區,賀州,百色,河池”

x( 21 )=”海口,三亞”

x( 22 )=”成都,綿陽,德陽,自貢,攀枝花,廣元,內江,樂山,南充,宜賓,廣安,達川,雅安,眉山,甘孜,涼山,瀘州”

x( 23 )=”貴陽,六盤水,遵義,安順,銅仁,黔西南,畢節,黔東南,黔南”

x( 24 )=”昆明,大理,曲靖,玉溪,昭通,楚雄,紅河,文山,思茅,西雙版納,保山,德宏,麗江,怒江,迪慶,臨滄”

x( 25 )=”拉薩,日喀則,山南,林芝,昌都,阿里,那曲”

x( 26 )=”西安,寶雞,咸陽,銅川,渭南,延安,榆林,漢中,安康,商洛”

x( 27 )=”蘭州,嘉峪關,金昌,白銀,天水,酒泉,張掖,武威,定西,隴南,平涼,慶陽,臨夏,甘南”

x( 28 )=”銀川,石嘴山,吳忠,固原”

x( 29 )=”西寧,海東,海南,海北,黃南,玉樹,果洛,海西”

x( 30 )=”烏魯木齊,石河子,克拉瑪依,伊犁,巴音郭勒,昌吉,克孜勒蘇柯爾克孜,博 爾塔拉,吐魯番,哈密,喀什,和田,阿克蘇”

x( 31 )=””

x( 32 )=””

x( 33 )=”台北,高雄,台中,台南,屏東,南投,雲林,新竹,彰化,苗栗,嘉義,花蓮,桃園,宜蘭,基隆,台東,金門,馬祖,澎湖”

function test(a,b)

dim num,x1,i

num =a.selectedIndex

x1=split(x(num),”,”)

b.options.length=ubound(x1)+1

For i = 0 to ubound(x1)

b.options(i).text =x1(i)

b.options(i).value = x1(i)

next

end function

—

/script

body

select name=”a” size=1 onChange=”vbscript:test a,b”

option value= 0 北京/option

option value= 1 上海/option

option value= 2 天津/option

option value= 3 重慶/option

option value= 4 河北/option

option value= 5 山西/option

option value= 6 內蒙古/option

option value= 7 遼寧/option

option value= 8 吉林/option

option value= 9 黑龍江/option

option value= 10 江蘇/option

option value= 11 浙江/option

option value= 12 安徽/option

option value= 13 福建/option

option value= 14 江西/option

option value= 15 山東/option

option value= 16 河南/option

option value= 17 湖北/option

option value= 18 湖南/option

option value= 19 廣東/option

option value= 20 廣西/option

option value= 21 海南/option

option value= 22 四川/option

option value= 23 貴州/option

option value= 24 雲南/option

option value= 25 西藏/option

option value= 26 陝西/option

option value= 27 甘肅/option

option value= 28 寧夏/option

option value= 29 青海/option

option value= 30 新疆/option

option value= 31 香港/option

option value= 32 澳門/option

option value= 33 台灣/option

/select

select name=”b”

/select

拷貝到記事本.保存為.htm或.asp

jquery省市區三級聯動編輯時怎麼默認選中

以下代碼放在一個單獨的js文件中，在頁面上引用即可調用

複製代碼 代碼如下:

//獲取cookie值

function readCookie(name) {

var cookieValue = “”;

var search = name + “=”;

if (document.cookie.length 0) {

offset = document.cookie.indexOf(search);

if (offset != -1) {

offset += search.length;

end = document.cookie.indexOf(“;”, offset);

if (end == -1) end = document.cookie.length;

cookieValue = unescape(document.cookie.substring(offset, end))

}

}

return cookieValue;

}

//保存cookie值

function writeCookie(name, value, hours, escp) {

var expire = “”;

if (hours != null) {

expire = new Date((new Date()).getTime() + hours * 3600000);

expire = “; expires=” + expire.toGMTString();

}

if (escp == “True”) {

document.cookie = name + “=” + value + expire;

} else {

document.cookie = name + “=” + escape(value) + expire;

}

}

//省市區，流域，水系，斷麵條件選擇

$(function() {

var $ddlprovince = $(“#ddlProvince”); //省份

var $ddlcity = $(“#ddlCity”); //城市

var $ddlarea = $(“#ddlAreaName”); //區域

//根據省份查詢城市

//$ddlprovince.focus(); //不要加focus,否則設置selected有問題

$ddlprovince.bind(“change keyup”, function() {

if ($(this).val() != “-1”) {

loadWater($(this).val(), “SelectCity”);

} else {

$(“select[id$=ddlCity] option”).remove();

$ddlcity.append($(“option/option”).val(“-1”).html(“–請選擇–“));

}

//從新選擇省份或者從新選擇城市都會初始化區域

$(“select[id$=ddlAreaName] option”).remove();

$ddlarea.append($(“option/option”).val(“-1”).html(“–請選擇–“));

});

//如果城市沒有填充數據，省份有選擇數據則載入數據

if ($(“select[id$=ddlCity] option”).length == 1 $ddlprovince.val() != “-1”) {

loadWater($ddlprovince.val(), “SelectCity”);

//讀cookie,有值則設為選中狀態

var cityname = readCookie(“JQ_CityName”);

if (cityname != null cityname != “undefined” cityname != “”) {

//$(“select[id=ddlWaterXiName] option:contains(‘” + watername + “‘)”).attr(“selected”, “true”);

$(“select[id$=ddlCity] option[value='” + cityname + “‘]”).attr(“selected”, “true”);

}

}

//根據城市查詢區域

//$ddlcity.focus();

$ddlcity.bind(“change keyup”, function() {

if ($(this).val() != “-1”) {

loadWater($(this).val(), “SelectAreaName”);

//選中值存cookie

writeCookie(“JQ_CityName”, $(this).val(), 0.5, true);

} else {

$(“select[name$=ddlAreaName] option”).remove();

$ddlarea.append($(“option/option”).val(“-1”).html(“–請選擇–“));

}

});

//如果區名沒有填充數據，城市有選擇數據則載入數據

if ($(“select[id$=ddlAreaName] option”).length == 1 $ddlcity.val() != “-1”) {

loadWater($ddlcity.val(), “SelectAreaName”);

//讀cookie,有值則設為選中狀態

var areaname = readCookie(“JQ_AreaName”);

if (areaname != null areaname != “undefined” areaname != “”) {

$(“select[id=ddlAreaName] option[value='” + areaname + “‘]”).attr(“selected”, “true”);

}

}

$ddlarea.bind(“change keyup”, function() {

if ($(this).val() != “-1”) {

//選中值存cookie

writeCookie(“JQ_AreaName”, $(this).val(), 0.5, true);

}

});

});

function loadWater(selectedItem, typename) {

$.ajax({

type: “GET”,

url: “/GetWaterxiname.ashx”,

data: { usetype: typename, id: selectedItem },

contentType: “application/json; charset=utf-8”,

dataType: “json”,

async: false,

success: function Success(data) {

bindWater(data, typename);

}

});

}

function bindWater(data, typename) {

if (typename == “SelectCity”) { //綁定城市

$(“select[name$=ddlCity] option”).remove(); //刪除原有的option

$(“select[id$=ddlCity]”).append($(“option/option”).val(“-1”).html(“–請選擇–“));

for (var i = 0; i data.length; i++) {

$(“select[id$=ddlCity]”).append($(“option/option”).val(data[i].City).html(data[i].City));

}

}

else if (typename == “SelectAreaName”) {

$(“select[name$=ddlAreaName] option”).remove(); //刪除原有的option

$(“select[id$=ddlAreaName]”).append($(“option/option”).val(“-1”).html(“–請選擇–“));

for (var i = 0; i data.length; i++) {

$(“select[id$=ddlAreaName]”).append($(“option/option”).val(data[i].AreaName).html(data[i].AreaName));

}

}

}

如何用js實現省市區之間的三級聯動

頁面中獲取值並判斷的js如下：

script type=”text/javascript”

//這個函數是必須的，因為在area.js里每次更改地址時會調用此函數

function promptinfo()

{

var address = document.getElementById(‘address’);

var s1 = document.getElementById(‘s1’);

var s2 = document.getElementById(‘s2’);

var town1 = document.getElementById(‘town1’);

怎樣用js實現在資料庫一張省市區表實現地區三級聯動

第一個select 讀的全部的省份，然後根據第一個select 所選的id讀出第二個SELECT 的值，第三個值則跟第二個的值取法一樣，這是要連接資料庫的！