ตัวอย่างนี้แชร์รหัสเฉพาะสำหรับ JS เพื่อใช้เมนูแบบเลื่อนลงที่สองสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
JS Code Part:
/** การเชื่อมโยงเมืองระดับที่สองแห่งชาติ JS เวอร์ชัน*/ฟังก์ชั่น dsy () {this.items = {};} dsy.prototype.add = ฟังก์ชั่น (id, array) {this.items [id] = iarray;} dsy.prototype.exists = ฟังก์ชั่น ส่งคืนจริง;} ฟังก์ชั่นการเปลี่ยนแปลง (v) {var str = "0"; สำหรับ (i = 0; i <v; i ++) {str+= ("_"+(document.getElementById (s [i]). selectedIndex-1)); - var ss = document.getElementById (s [v]); ด้วย (ss) {length = 0; ตัวเลือก [0] = ตัวเลือกใหม่ (opt0 [v], opt0 [v]); if (v && document.getElementById (s [v-1]). selectedIndex> 0 ||! v) {ถ้า (dsy.exists (str)) {ar = dsy.items [str]; สำหรับ (i = 0; i <ar.length; i ++) {ตัวเลือก [ความยาว] = ตัวเลือกใหม่ (ar [i], ar [i]); } // สิ้นสุดสำหรับ if (v) {ตัวเลือก [0]. selected = true; }}} // สิ้นสุดถ้า v ถ้า (++ v <s.length) {เปลี่ยน (v);}} // จบด้วย} var dsy = new dsy (); dsy.add ("0", ["Beijing", "Tianjin", "Shanghai", "Chongqing" Mongolia "," Liaoning "," Jilin "," Heilongjiang "," Jiangsu "," Zhejiang "," Anhui "," Fujian "," Jiangxi "," Shandong "," Heinan "," Hubei " Uangxi "," Hainan "," Sichuan "," Guizhou "," Yunnan "," Yunnan "," Yunnan "," Yunnan "," Yunnan "," Tibet "," Shaanxi "," Gansu "," Qinghai " กง "," มาเก๊า "," จังหวัดไต้หวัน "]); dsy.add (" 0_0 ", [" เขต Dongcheng "," เขต Xicheng "," District Chongwen "," เขต Xuanwu "," District "เขต", "เขตเมือง "Tongzhou District", "Shunyi District", "Changping District", "Daxing District", "Huairou District", "Pinggu District", "Miyun County", "Yanqing County", "Yanqing Town"]); dsy.add ("0_1", ["เขต heping", "เขตเฮดตง", "เขตเฮกซี่", "เขต Nankai", "อำเภอ Hebei", "เขต Hongqiao", "เขต Tanggu", เขต Hangu "," เขต Dagang "," เขต " "เขต Baodie", "Ji County", "Ninghe County", "Lutai Town", "Jinghai County", "เมือง Jinghai"]); Dsy.add ("0_2", ["เขต Huangpu", "เขต Luwan", "เขต Xuhui" District "," Hongkou District "," Yangpu District "," Minhang District "," Baoding District "," Baoding District "," Baoding District "," District Jinshan "," District Songjiang "," Chong County "," Chong Town "]); dsy.add (" 0_3 ", [" เขต Yuzhong "," Dadoukou District "," Jiangbei District "," District Shapingba District "," เขต Jiulongpo "," District "District", "District", "District", "Nan's District" District "," Fuling District "," Qianjiang District "," Changshou District "," Hechuan City "," Yongchuan City "," Jijin City "," Nanchuan City "," County County County "เมือง", "เมือง" เขต "," Fengdu County "," Chengkou County "," Liangping County "," Kai County "," Wuxi County "," Wushan County "," Fengjie County "," Yunyang County "," Zhong County "," Shizhu Tujia County Autonomous County "," Xiushan Tujia Miao Autonomous County "]); dsy.add (" 0_4 ", [" เมือง Shijiazhuang "," เมือง Zhangjiakou "," เมือง Chengde "," เมือง Binhuangdao ", เมือง" เมือง "," Cangzhou City "," Xingtai City "," Handan City "]); Dsy.add (" 0_5 ", [" Taiyuan City "," เมือง Shuozhou "," เมือง Datong "," เมืองลุค City "," Yun City "]); Dsy.add (" 0_6 ", [" Hohhot City "," Baotou City "," Wuhai City "," Chifeng City "," Tongliao City "," Hurundai City "," Ordos City "," Ulanqab City " ลีก "]); dsy.add (" 0_7 ", [" Shenyang City "," Chaoyang City "," Fuxin City "," Teling City "," Fushun City "," Benxi City "," Liaoyang City "," เมือง Anshan "," เมือง Dandong "," เมือง Dalian " เมือง "," Huludao City "]); dsy.add (" 0_8 ", [" Changchun City "," Baicheng City "," Songyuan City "," Jilin City "," Siping City "," Liaoyuan City "," เมือง Tonghua "," Baishan City " จังหวัด "]); dsy.add (" 0_9 ", [" Harbin City "," Qiqihar City "," Qitaihe City "," เมือง Heihe "," Daqing City "," เมือง Hegang "," เมือง Yichun "," เมือง Jiamusi " เมือง "," พื้นที่ Daxinganling "]); dsy.add (" 0_10 ", [" หนานจิง "," Xuzhou "," Lianyungang "," Suqian "," Hui'an "," Yanzhou "," Yangzhou " "," Taizhou "," Nantong "," Zhenjiang "," Changzhou "," Wuxi "," Suzhou "]]); dsy.add (" 0_11 ", [" Hangzhou "," Huzhou "," Jiaxing "," Zhoushan "," Ningbo "," Shaoxing "," Quzhou "," Jinhua "," Taizhou "," Wenzhou ", "Lishui"]); dsy.add ("0_12", ["hefei", "suzhou", "huaibei", "bozhou", "Fuyang", "Bengbu", "Huainan" "เมืองชูซโจว", "เมืองมาซาน", "เมืองหวู่", "เมืองตองลิง", "เมืองแอนคิง", "เมืองฮังชาน", "เมืองลุยอัน", "เมืองโกฮู" เมือง "Sanming City", "Quanzhou City", "Xiamen City", "Zhangzhou City", "Longyan City", "Ningde City"]); Dsy.add ("0_14", ["เมือง Nanchang" เมือง "เมือง" "เมือง Ganzhou", "Shangrao City", "Fuzhou City", "Yichun City", "Jian City"]); Dsy.add ("0_15", ["Jinan City", "เมืองชิงดา" เมือง "เมือง" "เมือง Weihai", "เมือง Rizhao", "Linyi City", "Zaozhuang City", "Jining City", "Tai'an City", "Laiwu City", "Binzhou City", "เมือง HEZE"); Dsy.add ("0_16" City "," Jiazuo City "," Xinxiang City "," Hebi City "," Anyang City "," Puyang City "," Shangqiu City "," เมือง Xuchang "," Luohe City ", เมือง" เมือง ", เมือง" "Jiyuan City"]); dsy.add ("0_17", ["Wuhan City", "Shiyan City", "Xiangfan City", "Jingmen City", "Xiaogan City", "เมือง Huanggang", "เมืองเอสหู "เมืองซัวโจว", "หน่วยบริหารระดับจังหวัด", "จังหวัด Enshi"]); dsy.add ("0_18", ["เมืองชางชา", "เมืองจางเจียเจนี", "ซิตี้ซิตี้" เมือง "เมือง" "เมืองยงโจว", "เมือง Shaoyang", "Huaihua City", "Loudi City", "จังหวัด Xiangxi"]); Dsy.add ("0_19", ["เมือง Guangzhou" เมือง "เมือง" "เมือง Chaozhou", "Shantou City", "Jieyang City", "Shanwei City", "Huizhou City", "Dongguan City", "Zhuhai City", "เมือง Zhongshan", "เมือง" เมือง " "Zhanjiang City"]); dsy.add ("0_20", ["Nanning City", "Guilin City", "Liuzhou City", "Wuzhou City", "Guigang City", "เมือง Yulin", "เมือง Yulin" City "," Hechi City "," Laibin City "," เมืองเฮาโจว "]); dsy.add (" 0_21 ", [" Haikou City "," Sanya City "," หน่วยบริหารจังหวัด "]; Dsy.add (" 0_21 " เพิ่ม ("0_22", ["เมืองเฉิงตู", "เมืองกวางจัน", "เมืองเมนีนัง", "เมืองดีหยาง", "เมืองแนนงง", "เมืองกงอาน", "ซิตี้ซิตี้" เมือง "เมืองเลชาน" เมือง " เมือง "," เมือง Dazhou "," Ziyang City "," Meishan City "," Ya'an City "," Aba City "," Ganzi City "," Liu Panshui City "," Zunyi City "," Qiandongs City " จังหวัด "]); dsy.add (" 0_24 ", [" เมืองคุนมิง "," เมือง Qujing "," เมือง Yuxi "," เมือง Baoshan "," เมือง Zhaotong "," Lijiang City "," City City "," เมือง Lincang " City "," Chuxiong City "," Honghe City "," Wenshan City "," Xishuangbanna City "]); dsy.add (" 0_25 ", [" Lhasa City "," Naqu Area "," Changdu Area "," Linzhi Area "," พื้นที่ Shannan " พื้นที่ "]); dsy.add (" 0_26 ", [" เมืองซีอาน "," เมือง Yan'an "," เมือง Tongchuan "," Weinan City "," เมืองเซียยัน "," เมือง Baoji "," เมืองฮันจง "," เมืองยูลิน " ("0_27", ["Lanzhou City", "Jiayuguan City", "Baiyin City", "Tianshui City", "Wuwei City", "Jiuquan City", "เมือง Longnan" เมือง "เมือง" เมือง "]); dsy.add (" 0_28 ", [" เมืองซินิง "," เขต Haidong "," จังหวัด Haibei "," จังหวัดไหหลำ "," จังหวัด Huangnan "," Duixi Prefecture "," City "," Shizuishan City "," Wuzhong City "," Guyuan City "Zhongwei City"]); dsy.add ("0_30", ["Urumqi City", "เมือง Karamay", "ภูมิภาค Hotan", "ภูมิภาค Hathan" "จังหวัด Kizilsuke", "จังหวัด Bortala", "จังหวัด Changji", "จังหวัด Bainguoleng", "จังหวัด Ili", "จังหวัด Tacheng", "ภูมิภาค Altay"]); dsy.add ("0_31" ภูมิภาค "]); dsy.add (" 0_32 ", [" Macao พิเศษภูมิภาคการบริหาร "]); dsy.add (" 0_33 ", [" ไทเป "," Taichung "," Huali "," Keilung "," Chiayi "," Lianjiang " "Tainan", Taoyuan "," Hsinchu "," Yilan "," Yunlin "," Changhua "]); dsy.add (" 0 ", [" Beijing "," Tianjin "," Shanghai "," Chongqing "," "Jiangsu", "Zhejiang", "Anhui", "Fujian", "Jiangxi", "Shandong", "Heinan", "Hubei", "Hunan", "Guizhon", "Guangxi", "Hainan" "Shaanxi", "Gansu", "Qinghai", "Ningxia", "Xinjiang", "Hong Kong", "Macao", "Taiwan Province"]); var s = ["S_Province" _init_area () {// ฟังก์ชั่นการเริ่มต้นสำหรับ (i = 0; i <s.length-1; i ++) {document.getElementById (s [i]). onChange = ฟังก์ชั่นใหม่ ("เปลี่ยน ("+(i+1)+")"); } เปลี่ยน (0);}ส่วนรหัส HTML:
<head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> การเชื่อมโยงระดับสองระดับชาติ </title> <style type = "text/css"> body {พื้นหลัง: #eeeeee; margin: 0; Padding: 0; Font-Family: "Microsoft Yahei", Arial, Helvetica, Sans-Serif; } a {color:#006600; การกำหนดข้อความ: ไม่มี;} a: โฮเวอร์ {color:#990000;}. ด้านบน {margin: 5px auto; สี:#990000; TEXT-ALGING: CENTER;}. ข้อมูลเลือก {BORDER: 1PX #993300 SOLID; พื้นหลัง: #FFFFF;}. ข้อมูล {มาร์จิ้น: 5PX; TEXT-ALIGN: CENTER;}. ข้อมูล #SHOW {สี: #3399FF; } .bottom {text-allign: ขวา; ขนาดตัวอักษร: 12px; สี: #CCCC; ความกว้าง: 1000px;} </style> </head> <body> <div> <h1> การเชื่อมโยงระดับสองระดับชาติ </h1> </div> <div> <div> <select id = "s_province" name = "s_province"> </select> <select id = "s_city" type = "text/javascript"> </script> <script type = "text/javascript"> _ init_area (); </script> </div> </div> </body> </html>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน