用jquery写的json省市县三级联动下拉

本文介绍如何使用HTML和JavaScript实现一个省市县三级联动的下拉选择框。通过预定义的JSON数据源,文章详细展示了如何动态生成并更新各层级下拉框的内容,以反映用户的选择。

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

  1. <form action="#" name="myform">  
  2.     <label></label><select name="provice" id="provice"><option value="-1">请输入省份</option></select>  
  3.     <label></label><select name="city" id="city"><option value="-1">请输入城市</option></select>  
  4.     <label></label><select name="locale" id="locale"><option value="-1">请输入区县</option></select>  
  5. </form>  

2. 定义json数据源:

[javascript] view plain copy
  1. var jsonData = [{  
  2.     treeNode : '请输入省份',  
  3.     value : -1,  
  4.     childNode : [{  
  5.     treeNode : '请输入城市',  
  6.     value : -1,  
  7.     childNode : [{  
  8.             treeNode : '请输入区县',  
  9.         value : -1,  
  10.         childNode : []   
  11.     }]  
  12.     }]    
  13. },{  
  14.     treeNode : '北京',  
  15.     value : 1,  
  16.     childNode : [{  
  17.     treeNode : '东城区',  
  18.     value : 11,  
  19.     childNode : []  
  20.     },{  
  21.     treeNode : '西城区',  
  22.     value : 12,  
  23.     childNode : []  
  24.     }]  
  25. },{  
  26.     treeNode : '广西壮族自治区',  
  27.     value : 2601,  
  28.     childNode : [{  
  29.     treeNode : '南宁',  
  30.     value : 6653,  
  31.     childNode : [{  
  32.         treeNode : '横县',  
  33.         value : 10799,  
  34.         childNode : []  
  35.     }, {  
  36.         treeNode : '宾阳县',  
  37.         value : 10800,  
  38.         childNode : []  
  39.         }]  
  40.     }]  
  41. }]  

3. javascript代码:
[javascript] view plain copy
  1. function initCountry(){  
  2.     var provice = $("#provice");  
  3.     var city = $("#city");  
  4.     var locale = $("#locale");  
  5.     var proviceStr = "";  
  6.     $.each(<span style="color:#FF0000;">jsonData</span>,function(index,items){  
  7.         proviceStr += "<option value='"+jsonData[index].value+"'>"+jsonData[index].treeNode+"</option>";  
  8.     });  
  9.     provice.empty().append(proviceStr);  
  10.     provice.bind("change",function(){  
  11.         if($(this).find(":selected").attr("value") == -1){        
  12.             city.empty().append("<option value='-1'>请输入区县</option>");  
  13.         }  
  14.     });  
  15.     provice.bind("change",function(){  
  16.         var cityStr = '';  
  17.         var index = provice.find(":selected").index();  
  18.         $.each(jsonData[index].childNode,function(index,items){  
  19.             city.empty();  
  20.             cityStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>";  
  21.             city.append(cityStr);  
  22.         })  
  23.         changeLocale();  
  24.     });  
  25.     city.bind("change",changeLocale);  
  26.     function changeLocale(){  
  27.         var localeStr = '';  
  28.         var index = provice.find(":selected").index();  
  29.         var index2 = city.find(":selected").index();  
  30.         $.each(jsonData[index].childNode[index2].childNode,function(index,items){  
  31.             locale.empty();  
  32.             localeStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>";  
  33.             locale.append(localeStr);  
  34.         })  
  35.         if(localeStr == ''){  
  36.             locale.empty();  
  37.             locale.append("<option value='-11'>请输入区县</option>");  
  38.         }  
  39.     }  
  40. }  
  41. $(function(){  
  42.     initCountry();  
  43.       
  44. }) 
资源下载链接为: https://pan.quark.cn/s/1bfadf00ae14 “STC单片机电压测量”是一个以STC系列单片机为基础的电压检测应用案例,它涵盖了硬件电路设计、软件编程以及数据处理等核心知识点。STC单片机凭借其低功耗、高性价比和丰富的I/O接口,在电子工程领域得到了广泛应用。 STC是Specialized Technology Corporation的缩,该公司的单片机基于8051内核,具备内部振荡器、高速运算能力、ISP(在系统编程)和IAP(在应用编程)功能,非常适合用于各种嵌入式控制系统。 在源代码方面,“浅雪”风格的代码通常简洁易懂,非常适合初学者学习。其中,“main.c”文件是程序的入口,包含了电压测量的核心逻辑;“STARTUP.A51”是启动代码,负责初始化单片机的硬件环境;“电压测量_uvopt.bak”和“电压测量_uvproj.bak”可能是Keil编译器的配置文件备份,用于设置编译选项和项目配置。 对于3S锂电池电压测量,3S锂电池由三节锂离子电池串联而成,标称电压为11.1V。测量时需要考虑电池的串联特性,通过分压电路将高电压转换为单片机可接受的范围,并实时监控,防止过充或过放,以确保电池的安全和寿命。 在电压测量电路设计中,“电压测量.lnp”文件可能包含电路布局信息,而“.hex”文件是编译后的机器码,用于烧录到单片机中。电路中通常会使用ADC(模拟数字转换器)将模拟电压信号转换为数字信号供单片机处理。 在软件编程方面,“StringData.h”文件可能包含程序中使用的字符串常量和数据结构定义。处理电压数据时,可能涉及浮点数运算,需要了解STC单片机对浮点数的支持情况,以及如何高效地存储和显示电压值。 用户界面方面,“电压测量.uvgui.kidd”可能是用户界面的配置文件,用于显示测量结果。在嵌入式系统中,用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值