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数据的格式问题。

目录
打赏
0
0
0
0
1
分享
相关文章
如何在Python中高效实现CSV到JSON的数据转换
在实际项目中,数据格式转换是常见问题,尤其从CSV到JSON的转换。本文深入探讨了多种转换方法,涵盖Python基础实现、数据预处理、错误处理、性能优化及调试验证技巧。通过分块处理、并行处理等手段提升大文件转换效率,并介绍如何封装为命令行工具或Web API,实现自动化批量处理。关键点包括基础实现、数据清洗、异常捕获、性能优化和单元测试,确保转换流程稳定高效。
122 83
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
淘宝商品评论数据API接口详解及JSON示例返回
淘宝商品评论数据API接口是淘宝开放平台提供的一项服务,旨在帮助开发者通过编程方式获取淘宝商品的评论数据。这些数据包括评论内容、评论时间、评论者信息、评分等,对于电商分析、用户行为研究、竞品分析等领域都具有极高的价值。
|
1月前
|
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
48 12
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。
PHP如何高效地处理JSON数据:从编码到解码
在现代Web开发中,JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据,包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法,可以显著提升JSON处理的性能,确保系统快速稳定运行。
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
54 1
JavaScript中的原型 保姆级文章一文搞懂
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
140 2
|
3月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
37 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等