The front linkage to achieve two provinces, cities

City Select frequently used functions as a web, a lot of online plug-in, which is very different principle.

The following simple explanation provinces municipal secondary linkage to achieve:

Directly on the code, point the front end will be able to understand, arrange!

html part:

　　　　　　　　　　　　　　　　<-! Provinces Options List ->
				<select class="provinceTarget inputEle selectTag" id="province">
	                <Option data-index = "- 1" value = "provinces"> Department </ option>
	            </select>
	            
	            <! - City Options List ->
				<select class="cityTarget inputEle selectTag" id="city">
	                <Option data-index = "- 1" value = "city"> City </ option>
	            </select>

js part:

/ * json data * / 
    var jsonList = [
    { "Provice": "Beijing", "city": [ "Dongcheng District," "West City", "Chaoyang District", "Fengtai District," "Shijingshan District", "Haidian District", "Mentougou" "Fangshan", "Tongzhou District", "shunyi area", "Changping District", "Daxing District", "Huairou", "Pinggu", "Miyun area", "Yanqing" ]},
    { "Provice": "Tianjin", "city": [ "zone of peace", "Hedong District," "Hexi District", "Nankai District," "Hebei District," "Hongqiao District," "Dongli District "" West green zone "," Jinnan District, "" Beichen District, "" Wuqing "," Baodi "," Binhai New area, "" ninghe district "," Jinghai District, "" Jizhou District " ]},
    { "Provice": "Hebei Province", "city": [ "Shijiazhuang City," "Tangshan City," "Qinhuangdao", "Handan City," "Xingtai City," "Baoding", "Zhangjiakou City" "Chengde City," "Cangzhou City," "Langfang City," "Hengshui City" ]},
    { "Provice": "Shanxi", "city": [ "Taiyuan", "Datong", "Yangquan City," "Changzhi City," "Jincheng", "Shuozhou City," "Jinzhong City "" Yuncheng city, "" Xinzhou city, "" city, "" Luliang city " ]},
    { "Provice": "Inner Mongolia Autonomous Region", "city": [ "Hohhot", "Baotou City," "Wuhai City," "Chifeng City," "Tongliao City," "Ordos City," "Hulunbeir" "Bayannaoer", "Wulanchabu," "Hing'an", "Xilin Gol League," "Alxa League" ]},
    { "Provice": "Liaoning Province", "city": [ "Shenyang", "Dalian City," "Anshan City," "Fushun City," "Benxi City," "Dandong City," "Jinzhou" "Yingkou City," "Fuxin City," "Liaoyang City," "Panjin City," "Tieling City," "Chaoyang City," "Huludao" ]},
    { "Provice": "Jilin", "city": [ "Changchun City," "Jilin City," "Siping City," "Liaoyuan City," "Tonghua City," "Baishan City," "Songyuan" "white city", "Yanbian Korean Autonomous Prefecture" ]},
    { "Provice": "Heilongjiang Province", "city": [ "Harbin", "Qiqihar City," "Jixi City," "Hegang City," "Shuangyashan City," "Daqing", "Yichun City "" Jiamusi City, "" Qitaihe City, "" Mudanjiang City, "" Heihe City, "" Suihua City, "" the Greater Xing'an Mountains " ]},
    { "Provice": "Shanghai", "city": [ "Huangpu District", "Xuhui District", "Changning", "Jing area", "Putuo District", "Hongkou District", "Yangpu District", "Minhang", "Baoshan", "Jiading District", "Pudong New area", "Jinshan District", "Matsue area", "Qingpu District", "Fengxian area", "area Chongming" ]},
    { "Provice": "Jiangsu Province", "city": [ "Nanjing", "Wuxi City," "Xuzhou", "Changzhou City," "Suzhou City," "Nantong City," "Lianyungang" "Huai'an City," "Yancheng", "Yangzhou City," "Zhenjiang City," "Taizhou City," "Suqian City" ]},
    { "Provice": "Zhejiang", "city": [ "Hangzhou", "Ningbo City," "Wenzhou", "Jiaxing City," "Huzhou City," "Shaoxing City," "Jinhua" "Quzhou City," "Zhoushan", "Taizhou", "Lishui" ]},
    { "Provice": "Anhui Province", "city": [ "Hefei", "Wuhu City," "Bengbu City," "Huainan City," "Ma On Shan City," "Huaibei City," "Tongling" "Anqing city," "Huangshan city," "Chuzhou city," "Fuyang city," "Suzhou city," "Luan", "Bozhou city," "Chizhou", "Vision city" ]},
    { "Provice": "Fujian", "city": [ "Fuzhou", "Xiamen", "Putian City," "Sanming City," "Quanzhou City," "Zhangzhou City," "Nanping" "Longyan City," "Ningde" ]},
    { "Provice": "Jiangxi", "city": [ "Nanchang", "Jingdezhen City," "Pingxiang City," "Jiujiang City," "Xinyu City," "Yingtan City," "Ganzhou" "Ji'an City," "Yichun City," "Fuzhou City", "Shangrao City" ]},
    { "Provice": "Shandong Province", "city": [ "Jinan City," "Qingdao", "Zibo City," "Zaozhuang City," "Dongying City," "Yantai City," "Weifang" "Jining City," "Tai'an City," "Weihai City," "sunshine City", "Laiwu City," "Linyi City," "Dezhou", "Liaocheng," "Binzhou City," "Heze City" ] },
    { "Provice": "Henan", "city": [ "Zhengzhou City," "Kaifeng", "Luoyang City," "Pingdingshan City," "Anyang City," "Hebi City," "Xinxiang" "Jiaozuo City," "Puyang City," "Xuchang City," "Luohe City," "Sanmenxia City," "Nanyang City," "Shangqiu City," "Xinyang City," "Zhoukou City," "Zhumadian" "Jiyuan City" ]},
    { "Provice": "Hubei Province", "city": [ "Wuhan", "Yellowstone City", "Shiyan City," "Yichang City," "Xiangyang City," "Ezhou City," "Jingmen" "Xiaogan City", "Jingzhou City," "Huanggang City", "Xianning City," "Suizhou," "Enshi Tujia and Miao Autonomous Prefecture", "Xiantao City," "Qianjiang City," "Tianmen", " Shennongjia " ]},
    { "Provice": "Hunan", "city": [ "Changsha", "Zhuzhou City," "Xiangtan City," "Hengyang City," "Shaoyang City," "Yueyang City," "Changde City" "Zhangjiajie City," "Yiyang City," "Chenzhou City," "Yongzhou", "Huaihua City," "Loudi City," "Xiangxi Tujia and Miao Autonomous Prefecture" ]},
    { "Provice": "Guangdong Province", "city": [ "Guangzhou", "Shaoguan City," "Shenzhen", "Zhuhai", "Shantou City," "Foshan City," "Jiangmen" "Zhanjiang", "Maoming City," "Zhaoqing City," "Huizhou City," "Meizhou City," "Shanwei City," "Heyuan City," "Yangjiang City," "Qingyuan City," "City" "Zhongshan", "Chaozhou City," "Jieyang City," "Yunfu" ]},
    { "Provice": "Guangxi Zhuang Autonomous Region", "city": [ "Nanning", "Liuzhou", "Guilin", "Wuzhou City," "Beihai City," "Fangchenggang City," "Qinzhou" "Guigang", "Yulin City," "Baise City," "Hezhou", "Hechi City," "Laibin", "Chongzuo" ]},
    { "Provice": "Hainan", "city": [ "Haikou City," "Sanya City," "Sansha City", "Danzhou City," "City of Five Fingers," "Qionghai City," "Wenchang City "" Wanning City, "" City of the East "," Ding'an "," Tunchang County "," Chengmai County "," Lingao County "," Baisha Li Autonomous County, "" Changjiang Li Autonomous County, "" music Li Autonomous County of the East "," Lingshui County, "" Baoting Li and Miao Autonomous County, "" Qiongzhong Li and Miao Autonomous County " ]},
    { "Provice": "Chongqing", "city": [ "Wanzhou District", "Fuling District," "Yuzhong District," "big crossing area", "Jiangbei District," "Shapingba District", "Jiulongpo "" South Bank area "," Beibei District "," Qijiang "," Dazu District "," Yubei District "," Banan District "," Qianjiang district "," longevity area "," Jiangjin "," Hechuan "," Yongchuan "," Nanchuan District "," Bishan area "," Tongliang area "," tongnan district "," Rongchang District "," On state area "," Liangping area "," Wulong area "," City of the county population, "" Fengdu County "," Dianjiang County "," Zhong "," Yunyang County, "" Fengjie County, "" Wushan County, "" Wuxi County "," stone Tujia Autonomous "," Xiushan Tujia and Miao Autonomous "," Youyang Tujia and Miao Autonomous "," Pengshui Miao Autonomy County " ]},
    { "Provice": "Sichuan Province", "city": [ "Chengdu", "Zigong City," "Panzhihua City," "Luzhou City," "Deyang City," "Mianyang City," "Guangyuan" "Suining City," "Neijiang City," "Leshan City," "Nanchong City," "Meishan City," "Yibin City," "Guang'an City," "Dazhou", "Ya'an City," "Bazhong" "Ziyang", "Aba Prefecture", "Ganzi", "Yi Autonomous Prefecture" ]},
    { "Provice": "Guizhou Province", "city": [ "Guiyang City," "Liupanshui City," "Zunyi City," "Anshun City," "Bijie City," "Tongren City," "Bouyei Miao Prefecture "," QianDongBan "," Miao Autonomous Prefecture " ]},
    { "Provice": "Yunnan", "city": [ "Kunming", "Qujing", "Yuxi City," "Baoshan City," "Zhaotong City," "Lijiang City," "Pu'er City" "Lincang", "Chuxiong Yi Autonomous Prefecture", "Honghe Hani and Yi Autonomous Prefecture", "Wenshan Zhuang and Miao Autonomous Prefecture", "Xishuangbanna Dai Autonomous Prefecture", "Dali Bai Autonomous Prefecture", "Dehong Dai-Jingpo Autonomous Prefecture", "Nujiang Lisu Autonomous "," Diqing " ]},
    { "Provice": "Tibet Autonomous Region", "city": [ "Lhasa", "Xigaze City," "Chamdo," "Nyingchi", "Nan Shan", "Nagqu City," "Ali region" ] },
    { "Provice": "Shaanxi Province", "city": [ "Xi'an", "Tongchuan City," "Baoji City," "Xianyang City," "Weinan City," "Yan'an City," "Hanzhong" "Yulin City," "Ankang", "Shangluo City" ]},
    { "Provice": "Gansu Province", "city": [ "Lanzhou", "Jiayuguan City," "Jinchang City," "Silver City," "Tianshui City," "Wuwei City," "Zhangye City" "Pingliang City," "Jiuquan City," "Qingyang City," "Dingxi City," "Longnan City," "Linxia Hui Autonomous Prefecture", "Gannan Tibetan Autonomous Prefecture" ]},
    { "Provice": "Qinghai", "city": [ "Xining City," "Haidong", "Haibei Tibetan Autonomous Prefecture", "Huangnan Tibetan Autonomous Prefecture", "Hainan Tibetan Autonomous Prefecture", "Tibetan Autonomous Prefecture of Golog "" Yushu Prefecture "," Haixi " ]},
    { "Provice": "Ningxia", "city": [ "Yinchuan", "Shizuishan", "Wuzhong", "Guyuan", "Zhongwei" ]},
    { "Provice": "Xinjiang Uygur Autonomous Region", "city": [ "Urumqi", "Karamay", "Turpan City," "Hami City," "Changji Hui Autonomous Prefecture", "Boertala Mongol Autonomous Prefecture" "Bayinguoleng Mongol Autonomous Prefecture", "Aksu Prefecture," "Kirgiz Autonomous Prefecture", "Kashi region", "Wada area", "Ili Kazak Autonomous Prefecture", "Tacheng", "Altay region" "Shihezi City," "Alar City," "Tumxuk", "Wujiaqu", "Tiemenguan City" ]},
    {"provice":"香港","city":["香港"]},
    { "Provice": "Macau", "city": [ "Macau" ]}];
    

/*    资料添加*/
var provice="";
var city="";
function loadCityData(){
    for(var i=0;i<jsonList.length;i++){
        provice="<option data-index="+i+" value='"+jsonList[i].provice+"'>"+jsonList[i].provice+"</option>";
        $(".provinceTarget").append(provice);
    }
    for(var j=0;j<jsonList[0].city.length;j++){
        city="<option data-index="+j+" value="+jsonList[0].city[j]+">"+jsonList[0].city[j]+"</option>";
        $(".cityTarget").append(city);
    }
}

$(function(){
    
    window.onload = function() {
      loadCityData();
    }
    
    $(".provinceTarget").change(function(){
        $(".cityTarget").empty();
        var opt=$(".provinceTarget option:selected").attr("data-index");
//        console.log(opt);
        if(opt == "-1"){
            City = "<index-Option Data = '-. 1' value = 'Cities'> City </ Option>" ;
            $(".cityTarget").append(city);
        }else{
            
            var length=jsonList[opt].city.length;
        
            for(var j=0;j<length;j++){
                city="<option data-index="+j+" value="+jsonList[opt].city[j]+">"+jsonList[opt].city[j]+"</option>";
                $(".cityTarget").append(city);
            }
        }
        

    });
    
    
})

 

 

Yes, it is so simple, and so on, three linkage, four linkage can not be overemphasized, the key is configured json data must be verified correctly.