实现省、市、区三级联动的输入框

最新推荐文章于 2025-07-07 15:15:49 发布

huxiy1995

最新推荐文章于 2025-07-07 15:15:49 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/huxiy1995/article/details/78714311

本文介绍了如何实现省、市、区三级联动的输入框，通过加载本地JSON数据并使用jQuery的$.getJSON方法。在实现过程中遇到了Chrome的跨域问题，解决方案是使用node.js搭建本地服务器。此外，还分享了从条件判断动态生成HTML到直接利用JSON简化工作流程的转变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来说说我最终的实现方法吧。
首先，可以从这里
下载获得，json文件很长很长，所以我将其作为JSON文件存储在工程下。
js读取json文件的方法有两种，一种通过Ajax，另一种通过Jquery的$.getJSON方法实现，我选取的是第二种。
然后，js代码如下：

 $.getJSON("../js/region.json", "", function(data) {
   
   　
        //初始化
        var text = '';
        var province = data[0].name;
        var cityList = data[0].city;
        var regionList = data[0].city[0].area;
        console.log(regionList);
        for (var i = 0; i < data.length; i++) {
            text += '<option value