<Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> provincial/municipal drop-down list </title> <Script type = "text/javascript"> Var provs = {"Jiangxi Province": ["Nanchang city", "Jingdezhen", "Jiujiang", "Yingtan", "Pingxiang", "Xinyu", "Ganzhou ", "Ji 'an", "Yichun", "Fuzhou", "Shangrao"], "Fujian Province": ["Fuzhou", "Xiamen", "Putian", "Sanming", "Quanzhou", "Zhangzhou", "Nanping", "Longyan ", "Ningde"], "Hebei Province": ["Shijiazhuang", "Handan", "Xingtai", "Baoding", "Zhangjiakou", "Chengde", "Langfang", "Tangshan ", "Qinhuangdao", "Cangzhou", "Hengshui"] }; Function loadProv (){ // Load province data Var prov = document. getElementById ("prov "); For (var key in provs ){ Var provName = key; Var optProv = document. createElement ("option "); OptProv. value = provName; OptProv. innerText = provName; Prov. appendChild (optProv ); } } Function provChange (){ Var prov = document. getElementById ("prov "); Var city = document. getElementById ("city "); Var provName = prov. value; // Hide the city drop-down list if no province is selected If (provName = "none "){ City. style. display = "none "; Return; } Else { City. style. display = ""; } Var citys = provs [provName]; // City. options. length = 0; // You can use this method to clear the original list. // Clear the original city data For (var I = city. childNodes. length-1; I> = 0; I --){ Var child = city. childNodes [I]; City. removeChild (child ); } // Add New City Data For (var I = 0; I <citys. length; I ++ ){ Var optCity = document. createElement ("option "); OptCity. value = citys [I]; OptCity. innerText = citys [I]; City. appendChild (optCity ); } } </Script> </Head> <Body onload = "loadProv ()"> <Select id = "prov" onchange = "provChange ()"> <Option value = "none"> select province </option> </Select> <Select id = "city" style = "display: none"> </select> </Body> </Html> |