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 }
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
以上是关于Javascript——JSON的主要内容，如果未能解决你的问题，请参考以下文章
Xitrum学习笔记08 - JavaScript and JSON