JSON-based cascading list implementation

JSON-based cascading list implementation

1, in JSON format to store the corresponding data; province Projson, City: Cityjson;

var projson={"1": "Guangdong Province", "2": "Hubei Province"};         var cityjson={"1": {' 020 ': ' Guangzhou ', ' 0755 ': ' Shenzhen ', ' 0756 ': ' Zhuhai '}, ' 2 ': {' 027 ': ' Wuhan ', ' 0710 ': ' Xiangfan ', ' 0715 ': ' Chibi '}}

2. After the page is loaded, you need to display the drop-down box for the province, so to read the Projson, add option through the for In loop.

window.onload=function() {            var province=document.getelementbyid ("province");              for inch Projson) {                Province.add (new Option (projson[temp],temp)); // The arguments are text, and Value;text are used to display them.             }        }

3. Once the province drop-down box triggers the onchange event.

First, restore the Level 2 menu;

Then, the selected provincial subscript value is obtained;

Finally, the corresponding sub-data is searched according to the subscript value;

        functionsetcity () {//as soon as this event is triggered, the level two menu must be restored            varCity=document.getelementbyid (' City '); City.options.length=1; //gets the subscript value of the selected provincial capital            varVal=document.getelementbyid ("province"). Value; Console.info ("Cityjson:" +Cityjson[val]); //If you do not select any provincial capital information, return directly            if(!cityjson[val])return; //get JSON data for level two menus with selected values            varsonjson=Cityjson[val];  for(TempinchSonjson) {City.add (NewOption (sonjson[temp],temp)); }        }        

The complete code implementation:

<! DOCTYPE html>//JSON: Used primarily for data exchange, in fact JSON is a formatted string        varStr= ' {' Name ': ' Demo ', ' Age ': ' 18 '} '; Console.info ("The current type is:" +typeof(str)); //convert string to JSON format        varobj=json.parse (str); Console.info ("The current type is:" +typeof(obj)); //two ways to access JSON outputConsole.info (Obj.name + "," + obj.age + "| |" + obj[' name '] + "," + obj[' age ']);  for(Tempinchobj) {Console.info (temp+ ":" + obj[temp]);//The JSON subscript is a string;} str=json.stringify (obj);//That is to convert the type of the object into a string type;Console.info ("The current type is:" +typeof(str)); //use JSON format to store the appropriate data and encoding        varprojson={"1": "Guangdong Province", "2": "Hubei Province"}; varcityjson={"1": {' 020 ': ' Guangzhou ', ' 0755 ': ' Shenzhen ', ' 0756 ': ' Zhuhai '}, ' 2 ': {' 027 ': ' Wuhan ', ' 0710 ': ' Xiangfan ', ' 0715 ': ' Chibi '}} window.onload=function(){            varProvince=document.getelementbyid ("province");  for(TempinchProjson) {Province.add (NewOption (projson[temp],temp));//The arguments are text, and Value;text are used to display them.             }        }                functionsetcity () {//as soon as this event is triggered, the level two menu must be restored            varCity=document.getelementbyid (' City '); City.options.length=1; //gets the subscript value of the selected provincial capital            varVal=document.getelementbyid ("province"). Value; Console.info ("Cityjson:" +Cityjson[val]); //If you do not select any provincial capital information, return directly            if(!cityjson[val])return; //get JSON data for level two menus with selected values            varsonjson=Cityjson[val];  for(TempinchSonjson) {City.add (NewOption (sonjson[temp],temp)); }        }                            </script>three ways to store data:1: Database: High security, can store structure but consumes resources2: Properties: Store non-sensitive data, and key value format, save resources3: XML: Stores non-sensitive data, and supports structures that are currently used for configuration files4: Hard-coded: mainly store non-sensitive data, and do not change the data--<select id= "province" onchange= "Setcity ()" > <option value= ">--Select the provincial capital--</option> < /select> <select id= "City" > <option value= "" >--Select cities--</option> </select></body >JSON implementation cascading list
JSON-based cascading list implementation