javascript实现省市区三级联动选择的代码(数据为模拟json数据)

简介: javascript实现省市区三级联动选择的代码(数据为模拟json数据):

javascript实现省市区三级联动选择的代码(数据为模拟json数据)



<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <style>
      select{
        width:100px;  
      }
    </style>
  </head>
  <body>
    省:
    <select name="" id="sheng">
      <option value="">请选择</option>
    </select>
    市:
    <select name="" id="shi" disabled="disabled">
      <option value="">请选择</option>
    </select>
    区:
    <select name="" id="qu" disabled="disabled">
      <option value="">请选择</option>
    </select>
    <script type="text/javascript">
      //省
      $.getJSON("data/local_P.json",function(date){
        date.forEach(function(item){
          var pOption = "<option value='"+item.id+"'>"+item.nameP+"</option>";
          $("#sheng").append(pOption);
        });
      });
      //市
      $("#sheng").change(function(){
        $("#shi").attr("disabled",false);
        $("#shi").children(":not(:first)").remove();
        $("#qu").children(":not(:first)").remove();
        $.getJSON("data/local_S.json",function(date){
          var pId = $("#sheng").val();
          date.forEach(function(item){
            if(item.p_id == pId){
              var sOption = "<option value='"+item.s_id+"'>"+item.nameS+"</option>";
              $("#shi").append(sOption);
            }
          });
        });
      });
      //区
      $("#shi").change(function(){
        $("#qu").attr("disabled",false);
        $("#qu").children(":not(:first)").remove();
        $.getJSON("data/local_q.json",function(date){
          console.log(date);
          var sId = $("#shi").val();
          date.forEach(function(item){
            if(item.s_id == sId){
              var qOption = "<option value='"+item.id_q+"'>"+item.nameq+"</option>";
              $("#qu").append(qOption);
            }
          });
        });
      });
    </script>
  </body>
</html>


数据为模拟数据,注意模拟的json数据每一项都要加双引号,否则 $.getJson()获取不到数据,json数据如下;


local_P.json:  


  [{
  "id":"1001",
  "nameP":"江苏"
},{
  "id":"1002",
  "nameP":"浙江"
}]


local_S.json:


[{
  "p_id":"1001",
  "s_id":"101",
  "nameS":"苏州"
},{
  "p_id":"1001",
  "s_id":"102",
  "nameS":"南通"
},{
  "p_id":"1002",
  "s_id":"201",
  "nameS":"金华"
},{
  "p_id":"1002",
  "s_id":"202",
  "nameS":"杭州"
}]


local_q.json:


[{
  "s_id":"102",
  "id_q":"10201",
  "nameq":"如皋"
},{
  "s_id":"102",
  "id_q":"10202",
  "nameq":"海门"
},{
  "s_id":"101",
  "id_q":"10203",
  "nameq":"吴中"
},{
  "s_id":"101",
  "id_q":"10204",
  "nameq":"高新区"
},{
  "s_id":"201",
  "id_q":"20203",
  "nameq":"金东"
},{
  "s_id":"201",
  "id_q":"20204",
  "nameq":"义乌"
},{
  "s_id":"202",
  "id_q":"20201",
  "nameq":"杭州下属市1"
},{
  "s_id":"202",
  "id_q":"20202",
  "nameq":"杭州下属市2"
}]


以上,是自己模拟json数据写的省市区三级联动选择的例子,注意json数据的格式问题。

目录
相关文章
|
13天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
1月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
33 0
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
1月前
|
存储 JSON Apache
揭秘 Variant 数据类型:灵活应对半结构化数据,JSON查询提速超 8 倍,存储空间节省 65%
在最新发布的阿里云数据库 SelectDB 的内核 Apache Doris 2.1 新版本中,我们引入了全新的数据类型 Variant,对半结构化数据分析能力进行了全面增强。无需提前在表结构中定义具体的列,彻底改变了 Doris 过去基于 String、JSONB 等行存类型的存储和查询方式。
揭秘 Variant 数据类型:灵活应对半结构化数据,JSON查询提速超 8 倍,存储空间节省 65%
|
9天前
|
存储 JSON JavaScript
「Python系列」Python JSON数据解析
在Python中解析JSON数据通常使用`json`模块。`json`模块提供了将JSON格式的数据转换为Python对象(如列表、字典等)以及将Python对象转换为JSON格式的数据的方法。
26 0
|
13天前
|
存储 JSON 数据挖掘
python逐行读取txt文本中的json数据,并进行处理
Python代码示例演示了如何读取txt文件中的JSON数据并处理。首先,逐行打开文件,然后使用`json.loads()`解析每一行。接着,处理JSON数据,如打印特定字段`name`。异常处理包括捕获`JSONDecodeError`和`KeyError`,确保数据有效性和字段完整性。将`data.txt`替换为实际文件路径运行示例。
11 2
|
13天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
1月前
|
JSON 数据格式
糊涂工具类(hutool)post请求设置body参数为json数据
糊涂工具类(hutool)post请求设置body参数为json数据
19 1
|
1月前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
11 0
|
1月前
|
JSON 并行计算 API
使用CJSON/Nlohmann:快速简便地在C/C++中处理JSON数据
使用CJSON/Nlohmann:快速简便地在C/C++中处理JSON数据
84 0