jquery regional linkage effect code based on json_jquery
WBOY
Release： 2016-05-16 18:05:05
Original
1123 people have browsed it
The original intention of writing this thing came from Sina Weibo. There is a region option in the Sina Weibo account settings. It is written in js. I wanted to intercept its code, but I was disappointed that its js code was compressed. , but the json type format I saw is quite well designed. Generally, the json data format without any processing in our background is similar to the following [{"Code":3231,"Name":"Changchun City" }, {"Code":3232,"Name":"Jilin City}] If there are 10,000 regions, there will be tens of thousands more characters. I think I should give up such a luxurious approach. Out of this idea, I wrote json output in this format using .NET, and wrote a drop-down based on jquery linkage. The main code is as follows: json code: <.>
$(function(){ //Get the json object var jsonobj = eval('(' area ')'); //Province number var provcodes = jsonobj.provcodes; //Province number array var provcodesArray = provcodes.split(','); // Number of province codes var provcodesLength = provcodesArray.length; //Province name var provinces = jsonobj.provinces; var provincesArray = provinces.split(','); var provhtml = ''; //Bind province for(var i=0;iprovhtml = ''; } $("#province").append(provhtml); //Select a provincial city to load the lower level $("#province").change(function(){ var cityhtml = ''; } $("#city").empty().append(cityhtml) ; }); });
/// /// Output json data /// /// /// Date:2011-07-01 /// Author:Peaceful Age /// /// public string WriteJson() { //Get all the data in the database Ilist areaList = GetAreaTypeListAll(); //Get the omissions Level collection, AT_ParentId=1 //var provNameParentId = from area in areaList where area.AT_ParentId == 1 select area; //All data var areaLinq = from area in areaList select area; //Filter, filter out provincial collections, filter and adjust AT_ParentId == 0 var areaWhereParentId = areaLinq.Where(m => m.AT_ParentId == 0).ToList(); // Provincial name format: "Hunan Province, Zhejiang Province, Beijing City,..." string provName = string.Join(",", areaWhereParentId.Select(m => m.AT_Name).ToArray()) ; //Provincial number format: "1,2,3,..." string provCode = string.Join(",", areaWhereParentId.Select(m => m.AT_Id).ToArray ()); //Provincial number int num = areaWhereParentId.Count(); var jsonstr = new StringBuilder(); jsonstr.Append("{"); var areaCityList = new List(); for(var i=0;i{ var areaType = new AreaType(); areaType = areaWhereParentId[i ] ; int id = areaType.AT_Id; areaCityList = areaLinq.Where(m => m.AT_ParentId == id).ToList(); var cityName = string.Join("," , areaCityList.Select(m => m.AT_Name).ToArray()); var cityCode = string.Join(",", areaCityList.Select(m => m.AT_Id).ToArray()) ; jsonstr.Append("""); jsonstr.Append("city"); jsonstr.Append(areaType.AT_Id); jsonstr.Append("""); jsonstr.Append(":"); jsonstr.Append("""); jsonstr.Append(cityName); jsonstr.Append("""); jsonstr. Append(","); jsonstr.Append("""); jsonstr.Append("code"); jsonstr.Append(areaType.AT_Id); jsonstr.Append( """); jsonstr.Append(":"); jsonstr.Append("""); jsonstr.Append(cityCode); jsonstr.Append(""") ; jsonstr.Append(","); } jsonstr.Append("provinces:"); jsonstr.Append("""); jsonstr.Append(provName ); jsonstr.Append("""); jsonstr.Append(","); jsonstr.Append("provcodes:"); jsonstr.Append(""") ; jsonstr.Append(provCode); jsonstr.Append("""); jsonstr.Append("}"); return jsonstr.ToString(); }
The region table is roughly designed as AT_Id: unique identifier, corresponding code in json AT_Name: Chinese name of the region AT_ParentId: parent id AT_Level: level, 1 For provincial level, 2 for municipal level The above code is for reference only, the code quality and efficiency cannot be guaranteed, use it at your own risk.. I hope to get everyone's valuable opinions and better solution-level methods
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
