demo1為最簡單的一份實現(xiàn)，頁面id配置需在js文件中寫入，適合簡單情況
demo2增加了動態(tài)配置，可將配置項傳入，適合頁面存在多個級聯(lián)下拉
以下為地市數(shù)據(jù)json格式,可使用ajax獲取或者做成ashx/asmx服務(wù)也可直接保存為js文件，可根據(jù)你的地市數(shù)據(jù)調(diào)整格式，并修改對應(yīng)源碼

復(fù)制代碼代碼如下:

 
var _ds_data=[ 
{ 
id:0, 
name:"\u5317\u4EAC", 
city:[ 
{ 
id:1, 
name:"\u5317\u4EAC\u5E02", 
area:[{id:1,name:"\u4E1C\u57CE\u533A"},{...},{...}...] 
},...] 
} 

為防止亂碼，使用了unicode編碼，轉(zhuǎn)換代碼如下：

復(fù)制代碼代碼如下:

 
/// <summary> 
/// 將原始字串轉(zhuǎn)換為unicode,格式為\u....\u.... 
/// </summary> 
public static string StringToUnicode(string srcText) 
{ 
string dst = ""; 
char[] src = srcText.ToCharArray(); 
for (int i = 0; i < src.Length; i++) 
{ 
byte[] bytes = Encoding.Unicode.GetBytes(src[i].ToString()); 
string str = @"\u" + bytes[1].ToString("X2") + bytes[0].ToString("X2"); 
dst += str; 
} 
return dst; 
} 
/// <summary> 
/// 將Unicode字串\u....\u....格式字串轉(zhuǎn)換為原始字符串 
/// </summary> 
public static string UnicodeToString(string srcText) 
{ 
string dst = ""; 
string src = srcText; 
int len = srcText.Length / 6; 
for (int i = 0; i <= len - 1; i++) 
{ 
string str = ""; 
str = src.Substring(0, 6).Substring(2); 
src = src.Substring(6); 
byte[] bytes = new byte[2]; 
bytes[1] = byte.Parse(int.Parse(str.Substring(0, 2), NumberStyles.HexNumber).ToString()); 
bytes[0] = byte.Parse(int.Parse(str.Substring(2, 2), NumberStyles.HexNumber).ToString()); 
dst += Encoding.Unicode.GetString(bytes); 
} 
return dst; 
} 

http://xiazai.jb51.net/201002/yuanma/cityselector.rar
打包下載地址

您可能感興趣的文章:

相關(guān)文章

封裝一個vue中也可使用的uniapp的全局彈窗組件(任何頁面都可以彈出)
在寫uniapp小程序的時候,彈窗提醒經(jīng)常會用到,雖然彈窗的組件很多,但是通常別人封裝好的彈窗組件自定義度不高,很難匹配自己的ui需求,這篇文章主要給大家介紹了封裝一個vue中也可使用的uniapp的全局彈窗組件的相關(guān)資料,這個組件在任何頁面都可以彈出,需要的朋友可以參考下
2023-02-02
js如何獲取對象在數(shù)組中的index
這篇文章主要介紹了js如何獲取對象在數(shù)組中的index，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
javascript在firefox下設(shè)為首頁的代碼
javascript在firefox下設(shè)為首頁的代碼...
2007-09-09
js實現(xiàn)圓盤記速表
本文分享了一個利用AmCharts制作的汽車速度計速表，通過設(shè)置不同的速度（數(shù)字）來動態(tài)改變計速表的指針。使用也非常簡單，下面給出方法。
2015-08-08
js函數(shù)使用技巧之 setTimeout(function(){},0)
setTimeout的作用是將函數(shù)推遲第二參數(shù)設(shè)定的毫秒數(shù)后再執(zhí)行，如果是0，就意味著瀏覽器要馬上執(zhí)行該函數(shù)，但是瀏覽器解析到setTimeout，雖然會"立刻"執(zhí)行
2009-02-02
JavaScript代碼實現(xiàn)圖片循環(huán)滾動效果
這篇文章主要介紹了JavaScript代碼實現(xiàn)圖片循環(huán)滾動效果的相關(guān)資料,非常不錯，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2016-06-06
jQuery中選擇查找自定義屬性具有特定值的所有元素
同樣在HTML5可以通過data-自定義屬性名來給元素添加自定義的屬性名。一旦添加完成之后。通過JS可以獲取以及設(shè)置自定義屬性。這篇文章主要介紹了jQuery中選擇查找自定義屬性具有特定值的所有元素
2023-02-02
JS中使用cavas截圖網(wǎng)頁并解決跨域及模糊問題
這篇文章主要介紹了JS中使用cavas截取網(wǎng)頁并解決跨域以及模糊問題 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-11-11
Javascript實現(xiàn)檢測客戶端類型代碼封包
在以前，總是以為使用用戶代理字符串檢測瀏覽器是那種類型就行了，這樣確實大錯特錯啊，下面就來說說如何通過js判斷出當(dāng)前瀏覽者使用的的設(shè)備類型呢
2015-12-12
JS實現(xiàn)最簡單的冒泡排序算法
這篇文章主要介紹了JS實現(xiàn)最簡單的冒泡排序算法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02