Javascript——JSON

Posted magic-dev

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript——JSON相关的知识,希望对你有一定的参考价值。

简易json数据三级联动下拉框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <select name="" id="provinces"></select>
11     <select name="" id="cities"></select>
12     <select name="" id="counties"></select>
13     <script src="base.js"></script>
14     <script src="data.js"></script>
15     <script>
16         
17         /**
18         获取各个select元素标签
19         */
20         var provinces = $("provinces")
21         var cities = $("cities")
22         var counties = $("counties")
23 
24         /*
25         @param
26          obj 需要添加信息的目标select元素标签
27          array 对应的数组信息 
28         获取数组信息并加入到数组中
29         
30         */
31         function getInfo(obj, array){
32             var string = ‘‘;
33             array.forEach(function(item,idx){
34                 string += <option value="+item.code+">+item.name+</option>;
35             })
36             obj.innerHTML = string;
37         }
38 
39         /*
40         *获得省份信息
41         */
42         function getProvinces(){
43             getInfo(provinces,data);
44         }
45 
46         /*
47         *获取市区信息
48         */
49         function getCities(){
50             provinceIdx = provinces.selectedIndex;
51             getInfo(cities,data[provinceIdx].cityList);
52         }
53 
54         /**
55         获取县区信息
56         */
57         function getCounties(){
58             provinceIdx = provinces.selectedIndex;
59             cityIdx = cities.selectedIndex;
60             getInfo(counties,data[provinceIdx].cityList[cityIdx].areaList);
61         }
62 
63         /*
64         初始化
65         */
66         function init(){
67           // 页面初始化
68             getProvinces();
69             getCities();
70             getCounties();
71             // 添加省份下拉框事件
72             provinces.onchange = function(){
73                 getCities();
74                 getCounties();
75             };
76             // 添加城市下拉框事件
77             cities.onchange = function(){
78                 getCounties();
79             };
80         }
81 
82         init();
83        
84     </script>
85 </body>
86 </html>

 

 

技术图片
1 function $(id){
2     return document.getElementById(id);
3 }
4 function print(log){
5     console.log(log);
6 }
base.js

 

技术图片
  1 /**
  2         此data模拟服务端传来的数据,数据太大省略其它省份和区
  3         */
  4              
  5        
  6 data = [
  7     {
  8       "code": "110000",
  9       "name": "北京市",
 10       "cityList": [
 11         {
 12           "code": "110000",
 13           "name": "北京市",
 14           "areaList": [
 15             {
 16               "code": "110101",
 17               "name": "东城区"
 18             },
 19             {
 20               "code": "110102",
 21               "name": "西城区"
 22             },
 23             {
 24               "code": "110105",
 25               "name": "朝阳区"
 26             },
 27             {
 28               "code": "110106",
 29               "name": "丰台区"
 30             },
 31             {
 32               "code": "110107",
 33               "name": "石景山区"
 34             },
 35             {
 36               "code": "110108",
 37               "name": "海淀区"
 38             },
 39             {
 40               "code": "110109",
 41               "name": "门头沟区"
 42             },
 43             {
 44               "code": "110111",
 45               "name": "房山区"
 46             },
 47             {
 48               "code": "110112",
 49               "name": "通州区"
 50             },
 51             {
 52               "code": "110113",
 53               "name": "顺义区"
 54             },
 55             {
 56               "code": "110114",
 57               "name": "昌平区"
 58             },
 59             {
 60               "code": "110115",
 61               "name": "大兴区"
 62             },
 63             {
 64               "code": "110116",
 65               "name": "怀柔区"
 66             },
 67             {
 68               "code": "110117",
 69               "name": "平谷区"
 70             },
 71             {
 72               "code": "110118",
 73               "name": "密云区"
 74             },
 75             {
 76               "code": "110119",
 77               "name": "延庆区"
 78             }
 79           ]
 80         }
 81       ]
 82     },
 83     {
 84       "code": "120000",
 85       "name": "天津市",
 86       "cityList": [
 87         {
 88           "code": "120000",
 89           "name": "天津市",
 90           "areaList": [
 91             {
 92               "code": "120101",
 93               "name": "和平区"
 94             },
 95             {
 96               "code": "120102",
 97               "name": "河东区"
 98             },
 99             {
100               "code": "120103",
101               "name": "河西区"
102             },
103             {
104               "code": "120104",
105               "name": "南开区"
106             },
107             {
108               "code": "120105",
109               "name": "河北区"
110             },
111             {
112               "code": "120106",
113               "name": "红桥区"
114             },
115             {
116               "code": "120110",
117               "name": "东丽区"
118             },
119             {
120               "code": "120111",
121               "name": "西青区"
122             },
123             {
124               "code": "120112",
125               "name": "津南区"
126             },
127             {
128               "code": "120113",
129               "name": "北辰区"
130             },
131             {
132               "code": "120114",
133               "name": "武清区"
134             },
135             {
136               "code": "120115",
137               "name": "宝坻区"
138             },
139             {
140               "code": "120116",
141               "name": "滨海新区"
142             },
143             {
144               "code": "120117",
145               "name": "宁河区"
146             },
147             {
148               "code": "120118",
149               "name": "静海区"
150             },
151             {
152               "code": "120119",
153               "name": "蓟州区"
154             }
155           ]
156         }
157       ]
158     },
159     {
160       "code": "130000",
161       "name": "河北省",
162       "cityList": [
163         {
164           "code": "130100",
165           "name": "石家庄市",
166           "areaList": [
167             {
168               "code": "130102",
169               "name": "长安区"
170             },
171             {
172               "code": "130104",
173               "name": "桥西区"
174             },
175             {
176               "code": "130105",
177               "name": "新华区"
178             },
179             {
180               "code": "130107",
181               "name": "井陉矿区"
182             },
183             {
184               "code": "130108",
185               "name": "裕华区"
186             },
187             {
188               "code": "130109",
189               "name": "藁城区"
190             },
191             {
192               "code": "130110",
193               "name": "鹿泉区"
194             },
195             {
196               "code": "130111",
197               "name": "栾城区"
198             },
199             {
200               "code": "130121",
201               "name": "井陉县"
202             },
203             {
204               "code": "130123",
205               "name": "正定县"
206             },
207             {
208               "code": "130125",
209               "name": "行唐县"
210             },
211             {
212               "code": "130126",
213               "name": "灵寿县"
214             },
215             {
216               "code": "130127",
217               "name": "高邑县"
218             },
219             {
220               "code": "130128",
221               "name": "深泽县"
222             },
223             {
224               "code": "130129",
225               "name": "赞皇县"
226             },
227             {
228               "code": "130130",
229               "name": "无极县"
230             },
231             {
232               "code": "130131",
233               "name": "平山县"
234             },
235             {
236               "code": "130132",
237               "name": "元氏县"
238             },
239             {
240               "code": "130133",
241               "name": "赵县"
242             },
243             {
244               "code": "130181",
245               "name": "辛集市"
246             },
247             {
248               "code": "130183",
249               "name": "晋州市"
250             },
251             {
252               "code": "130184",
253               "name": "新乐市"
254             }
255           ]
256         },
257         {
258           "code": "130200",
259           "name": "唐山市",
260           "areaList": [
261             {
262               "code": "130202",
263               "name": "路南区"
264             },
265             {
266               "code": "130203",
267               "name": "路北区"
268             },
269             {
270               "code": "130204",
271               "name": "古冶区"
272             },
273             {
274               "code": "130205",
275               "name": "开平区"
276             },
277             {
278               "code": "130207",
279               "name": "丰南区"
280             },
281             {
282               "code": "130208",
283               "name": "丰润区"
284             },
285             {
286               "code": "130209",
287               "name": "曹妃甸区"
288             },
289             {
290               "code": "130224",
291               "name": "滦南县"
292             },
293             {
294               "code": "130225",
295               "name": "乐亭县"
296             },
297             {
298               "code": "130227",
299               "name": "迁西县"
300             },
301             {
302               "code": "130229",
303               "name": "玉田县"
304             },
305             {
306               "code": "130281",
307               "name": "遵化市"
308             },
309             {
310               "code": "130283",
311               "name": "迁安市"
312             },
313             {
314               "code": "130284",
315               "name": "滦州市"
316             }
317           ]
318         },
319         {
320           "code": "130300",
321           "name": "秦皇岛市",
322           "areaList": [
323             {
324               "code": "130302",
325               "name": "海港区"
326             },
327             {
328               "code": "130303",
329               "name": "山海关区"
330             },
331             {
332               "code": "130304",
333               "name": "北戴河区"
334             },
335             {
336               "code": "130306",
337               "name": "抚宁区"
338             },
339             {
340               "code": "130321",
341               "name": "青龙满族自治县"
342             },
343             {
344               "code": "130322",
345               "name": "昌黎县"
346             },
347             {
348               "code": "130324",
349               "name": "卢龙县"
350             }
351           ]
352         },
353         {
354           "code": "130400",
355           "name": "邯郸市",
356           "areaList": [
357             {
358               "code": "130402",
359               "name": "邯山区"
360             },
361             {
362               "code": "130403",
363               "name": "丛台区"
364             },
365             {
366               "code": "130404",
367               "name": "复兴区"
368             },
369             {
370               "code": "130406",
371               "name": "峰峰矿区"
372             },
373             {
374               "code": "130407",
375               "name": "肥乡区"
376             },
377             {
378               "code": "130408",
379               "name": "永年区"
380             },
381             {
382               "code": "130423",
383               "name": "临漳县"
384             },
385             {
386               "code": "130424",
387               "name": "成安县"
388             },
389             {
390               "code": "130425",
391               "name": "大名县"
392             },
393             {
394               "code": "130426",
395               "name": "涉县"
396             },
397             {
398               "code": "130427",
399               "name": "磁县"
400             },
401             {
402               "code": "130430",
403               "name": "邱县"
404             },
405             {
406               "code": "130431",
407               "name": "鸡泽县"
408             },
409             {
410               "code": "130432",
411               "name": "广平县"
412             },
413             {
414               "code": "130433",
415               "name": "馆陶县"
416             },
417             {
418               "code": "130434",
419               "name": "魏县"
420             },
421             {
422               "code": "130435",
423               "name": "曲周县"
424             },
425             {
426               "code": "130481",
427               "name": "武安市"
428             }
429           ]
430         },
431         {
432           "code": "130500",
433           "name": "邢台市",
434           "areaList": [
435             {
436               "code": "130502",
437               "name": "桥东区"
438             },
439             {
440               "code": "130503",
441               "name": "桥西区"
442             },
443             {
444               "code": "130521",
445               "name": "邢台县"
446             },
447             {
448               "code": "130522",
449               "name": "临城县"
450             },
451             {
452               "code": "130523",
453               "name": "内丘县"
454             },
455             {
456               "code": "130524",
457               "name": "柏乡县"
458             },
459             {
460               "code": "130525",
461               "name": "隆尧县"
462             },
463             {
464               "code": "130526",
465               "name": "任县"
466             },
467             {
468               "code": "130527",
469               "name": "南和县"
470             },
471             {
472               "code": "130528",
473               "name": "宁晋县"
474             },
475             {
476               "code": "130529",
477               "name": "巨鹿县"
478             },
479             {
480               "code": "130530",
481               "name": "新河县"
482             },
483             {
484               "code": "130531",
485               "name": "广宗县"
486             },
487             {
488               "code": "130532",
489               "name": "平乡县"
490             },
491             {
492               "code": "130533",
493               "name": "威县"
494             },
495             {
496               "code": "130534",
497               "name": "清河县"
498             },
499             {
500               "code": "130535",
501               "name": "临西县"
502             },
503             {
504               "code": "130581",
505               "name": "南宫市"
506             },
507             {
508               "code": "130582",
509               "name": "沙河市"
510             }
511           ]
512         },
513         {
514           "code": "130600",
515           "name": "保定市",
516           "areaList": [
517             {
518               "code": "130602",
519               "name": "竞秀区"
520             },
521             {
522               "code": "130606",
523               "name": "莲池区"
524             },
525             {
526               "code": "130607",
527               "name": "满城区"
528             },
529             {
530               "code": "130608",
531               "name": "清苑区"
532             },
533             {
534               "code": "130609",
535               "name": "徐水区"
536             },
537             {
538               "code": "130623",
539               "name": "涞水县"
540             },
541             {
542               "code": "130624",
543               "name": "阜平县"
544             },
545             {
546               "code": "130626",
547               "name": "定兴县"
548             },
549             {
550               "code": "130627",
551               "name": "唐县"
552             },
553             {
554               "code": "130628",
555               "name": "高阳县"
556             },
557             {
558               "code": "130629",
559               "name": "容城县"
560             },
561             {
562               "code": "130630",
563               "name": "涞源县"
564             },
565             {
566               "code": "130631",
567               "name": "望都县"
568             },
569             {
570               "code": "130632",
571               "name": "安新县"
572             },
573             {
574               "code": "130633",
575               "name": "易县"
576             },
577             {
578               "code": "130634",
579               "name": "曲阳县"
580             },
581             {
582               "code": "130635",
583               "name": "蠡县"
584             },
585             {
586               "code": "130636",
587               "name": "顺平县"
588             },
589             {
590               "code": "130637",
591               "name": "博野县"
592             },
593             {
594               "code": "130638",
595               "name": "雄县"
596             },
597             {
598               "code": "130681",
599               "name": "涿州市"
600             },
601             {
602               "code": "130682",
603               "name": "定州市"
604             },
605             {
606               "code": "130683",
607               "name": "安国市"
608             },
609             {
610               "code": "130684",
611               "name": "高碑店市"
612             }
613           ]
614         },
615         {
616           "code": "130700",
617           "name": "张家口市",
618           "areaList": [
619             {
620               "code": "130702",
621               "name": "桥东区"
622             },
623             {
624               "code": "130703",
625               "name": "桥西区"
626             },
627             {
628               "code": "130705",
629               "name": "宣化区"
630             },
631             {
632               "code": "130706",
633               "name": "下花园区"
634             },
635             {
636               "code": "130708",
637               "name": "万全区"
638             },
639             {
640               "code": "130709",
641               "name": "崇礼区"
642             },
643             {
644               "code": "130722",
645               "name": "张北县"
646             },
647             {
648               "code": "130723",
649               "name": "康保县"
650             },
651             {
652               "code": "130724",
653               "name": "沽源县"
654             },
655             {
656               "code": "130725",
657               "name": "尚义县"
658             },
659             {
660               "code": "130726",
661               "name": "蔚县"
662             },
663             {
664               "code": "130727",
665               "name": "阳原县"
666             },
667             {
668               "code": "130728",
669               "name": "怀安县"
670             },
671             {
672               "code": "130730",
673               "name": "怀来县"
674             },
675             {
676               "code": "130731",
677               "name": "涿鹿县"
678             },
679             {
680               "code": "130732",
681               "name": "赤城县"
682             }
683           ]
684         },
685         {
686           "code": "130800",
687           "name": "承德市",
688           "areaList": [
689             {
690               "code": "130802",
691               "name": "双桥区"
692             },
693             {
694               "code": "130803",
695               "name": "双滦区"
696             },
697             {
698               "code": "130804",
699               "name": "鹰手营子矿区"
700             },
701             {
702               "code": "130821",
703               "name": "承德县"
704             },
705             {
706               "code": "130822",
707               "name": "兴隆县"
708             },
709             {
710               "code": "130824",
711               "name": "滦平县"
712             },
713             {
714               "code": "130825",
715               "name": "隆化县"
716             },
717             {
718               "code": "130826",
719               "name": "丰宁满族自治县"
720             },
721             {
722               "code": "130827",
723               "name": "宽城满族自治县"
724             },
725             {
726               "code": "130828",
727               "name": "围场满族蒙古族自治县"
728             },
729             {
730               "code": "130881",
731               "name": "平泉市"
732             }
733           ]
734         },
735         {
736           "code": "130900",
737           "name": "沧州市",
738           "areaList": [
739             {
740               "code": "130902",
741               "name": "新华区"
742             },
743             {
744               "code": "130903",
745               "name": "运河区"
746             },
747             {
748               "code": "130921",
749               "name": "沧县"
750             },
751             {
752               "code": "130922",
753               "name": "青县"
754             },
755             {
756               "code": "130923",
757               "name": "东光县"
758             },
759             {
760               "code": "130924",
761               "name": "海兴县"
762             },
763             {
764               "code": "130925",
765               "name": "盐山县"
766             },
767             {
768               "code": "130926",
769               "name": "肃宁县"
770             },
771             {
772               "code": "130927",
773               "name": "南皮县"
774             },
775             {
776               "code": "130928",
777               "name": "吴桥县"
778             },
779             {
780               "code": "130929",
781               "name": "献县"
782             },
783             {
784               "code": "130930",
785               "name": "孟村回族自治县"
786             },
787             {
788               "code": "130981",
789               "name": "泊头市"
790             },
791             {
792               "code": "130982",
793               "name": "任丘市"
794             },
795             {
796               "code": "130983",
797               "name": "黄骅市"
798             },
799             {
800               "code": "130984",
801               "name": "河间市"
802             }
803           ]
804         },
805         {
806           "code": "131000",
807           "name": "廊坊市",
808           "areaList": [
809             {
810               "code": "131002",
811               "name": "安次区"
812             },
813             {
814               "code": "131003",
815               "name": "广阳区"
816             },
817             {
818               "code": "131022",
819               "name": "固安县"
820             },
821             {
822               "code": "131023",
823               "name": "永清县"
824             },
825             {
826               "code": "131024",
827               "name": "香河县"
828             },
829             {
830               "code": "131025",
831               "name": "大城县"
832             },
833             {
834               "code": "131026",
835               "name": "文安县"
836             },
837             {
838               "code": "131028",
839               "name": "大厂回族自治县"
840             },
841             {
842               "code": "131081",
843               "name": "霸州市"
844             },
845             {
846               "code": "131082",
847               "name": "三河市"
848             }
849           ]
850         },
851         {
852           "code": "131100",
853           "name": "衡水市",
854           "areaList": [
855             {
856               "code": "131102",
857               "name": "桃城区"
858             },
859             {
860               "code": "131103",
861               "name": "冀州区"
862             },
863             {
864               "code": "131121",
865               "name": "枣强县"
866             },
867             {
868               "code": "131122",
869               "name": "武邑县"
870             },
871             {
872               "code": "131123",
873               "name": "武强县"
874             },
875             {
876               "code": "131124",
877               "name": "饶阳县"
878             },
879             {
880               "code": "131125",
881               "name": "安平县"
882             },
883             {
884               "code": "131126",
885               "name": "故城县"
886             },
887             {
888               "code": "131127",
889               "name": "景县"
890             },
891             {
892               "code": "131128",
893               "name": "阜城县"
894             },
895             {
896               "code": "131182",
897               "name": "深州市"
898             }
899           ]
900         }
901       ]
902     },
903    
904   ]
905    
data.js

 

以上是关于Javascript——JSON的主要内容,如果未能解决你的问题,请参考以下文章

使用JavaScript在页面上显示JSON

Xitrum学习笔记08 - JavaScript and JSON

vs code 自定义代码片段

前端开发工具vscode如何快速生成代码片段

Pentaho JavaScript JSON - 基于键将 json 对象连接到现有的 JSON 文档中

AJAX 响应:数据(JSON、XML)还是 HTML 片段? [关闭]