Based on Jquery, three levels of linkage are implemented: province, city, and district/county,
The front-end felt that there was a small amount of writing, and it was also intended to train the operator. In the afternoon, nothing was done to write this three-level linkage, which was also the first time to write this thing.
As far as I know, city information can be stored in a database or written directly at the front end. To save trouble, I wrote it directly at the front end. below is my code:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
"Http://www.w3.org/tr/html4/loose.dtd">
<Html>
<Head>
<Title> </title>
<Script src = "http://developer.bdimg.com/libs/jquery/2.1.4/jquery.min.js”> </script>
<Script>
$ (Document). ready (function (){
// Province city Array
Var fujian_city = new Array ('fuzhou ', 'zhangzhou', 'xiamen ', 'longyan', 'quanzhou ', 'nanping', 'putian ', 'ningde ', 'sanming ');
Var guangdong_city = new Array ('guangzhou ', 'shenzhen', 'dongguan ', 'chaozhou', 'heyuan ', 'shantou', 'zhuhai ', 'foshan ', 'zhaoqing ', 'shaoguan ');// List of districts and counties in the city
Var fuzhou_county = new Array ('gulou district ', 'taijiang district', 'pingtan ', 'jin 'an district', 'mawei district ', 'fuqing City', 'changle City ', 'minhou County ', 'lianjiang', 'minqingxian ');
Var zhangzhou_county = new Array ('tongcheng district ', 'longwen district', 'nanjing County ', 'pinghe County', 'longhury', 'dongshan County ', 'hua 'an County ');
Var xiamen_county = new Array ('huli district ', 'simming district', 'haicang district ', 'jimei district', 'tongan County ', 'xiang 'an district ');
// Obtain the province change event and set the selected province city information
$ ("# Province"). change (function (){
// Clear the information of the selected City
$ ("# City"). find ("option"). remove ();
// Set the default status of the unselected City
$ ("# City"). append ('<option value = "not selected"> not selected </option> ');
// Obtain the value of the selected Province
Var province = $ ("# province"). val ();
// Set the User-Defined Function of the city
$. Extend ({set_cities: function (province ){
Var arr_length = province. length;
For (var I = 1; I <= arr_length; I ++ ){
Var place_info = '<option value =' + province [I-1] + '>' + province [I-1] + '</option> ';
$ ("# City"). append (place_info );
}
}});
Switch (province ){
Case 'fujian ':
$. Set_cities (fujian_city );
Break;
Case 'guangdong ':
$. Set_cities (guangdong_city );
Break;
Default:
Alert ('provinces without information writing, only Fujian and Guangdong are shown here ');
}
})
// Obtain the event of changing the city and set the district/county information. Only information about some cities in Fuzhou, Zhangzhou, and Xiamen in Fujian is provided.
$ ("# City"). change (function (){
// Clear the information of the selected district/county
$ ("# County"). find ("option"). remove ();
// Set the default status of unselected districts and counties
$ ("# County"). append ('<option value = "not selected"> not selected </option> ');
// Obtain the value of the selected City
Var city = $ ("# city"). val ();
// Set the User-Defined Function for the District/County
$. Extend ({set_counties: function (city ){
Var arr_length = city. length;
For (var I = 1; I <= arr_length; I ++ ){
Var place_info = '<option value =' + city [I-1] + '>' + city [I-1] + '</option> ';
$ ("# County"). append (place_info );
}
}});
Switch (city ){
Case 'fuzhou ':
$. Set_counties (fuzhou_county );
Break;
Case 'xiamen ':
$. Set_counties (xiamen_county );
Break;
Case 'zhangzhou ':
$. Set_counties (zhangzhou_county );
Break;
Default:
Alert ('here only information about some cities in Fuzhou, Zhangzhou and Xiamen in Fujian ');
}
})
});
</Script>
</Head>
<Body>
<Div>
<Ul>
<Li><Select name = "province" id = "province">
<Option value = "Fujian"> Fujian </option>
<Option value = "Guangdong"> Guangdong </option>
<Option value = "Zhejiang"> Zhejiang </option>
<Option value = "Jiangxi"> Jiangxi </option>
</Select>
</Li>
<Li><Select name = "city" id = "city">
<Option value = "0"> not selected </option>
</Select>
</Li>
<Li>
<Select name = "county" id = "county">
<Option value = "0"> not selected </option>
</Select>
</Li>
</Ul>
</Div>
</Body>
</Html>
The effect is as follows:
This function is mainly implemented, and the relevant code has some notes, which are easy to understand. If you want to use it, you can directly add province and city data, or use ajax to retrieve data. If you do not understand the code, leave a message or contact me.
My blog: interaction between provinces, cities, and counties Based on Jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
