基于JSON的级联列表实现

时间:2023-02-07 13:15:51

基于JSON的级联列表实现

html代码:

 <select id="provice" onChange="setCity()">
<option value="">--请选择省份--</option>
</select> <select id="city">
<option value="">--请选择城市--</option>
</select>

JS代码:

 var provideJson = {"1":"河北省","2":"直辖市"};
var cityJson = {"1":{"01":"石家庄市","02":"衡水市","03":"邯郸市","04":"邢台市","05":"正定市"},"2":{"001":"北京市","002":"上海市","003":"天津市","004":"重庆市"}};
window.onload=function()
{
var proSel = document.getElementById("provice");
for(tmp in provideJson)
{
proSel.add(new Option(provideJson[tmp],tmp));
}
}
function setCity()
{
var proVal = document.getElementById("provice").value;
var city = document.getElementById("city");
city.options.length=1;
if(proVal == "") return;
for(temp in cityJson[proVal])
{
console.info(cityJson[proVal][temp]);
city.add(new Option(cityJson[proVal][temp],temp));
}
}

基于JSON的级联列表实现的更多相关文章

  1. js基于json的级联下拉框

    级联下拉列表是项目中常用到的.比如省市县,比如企业性质等,做成一个js通用组件, 在静态页出来后可以直接插入,将数据和html静态页做一个解耦. 贴出来抛砖引玉吧. /** * @author sun ...

  2. 使用NPOI生成Excel级联列表

    目录 1    概要    1 2    磨刀不误砍柴工——先学会Excel中的操作    2 3    利用NPOI生成导入模板    7 3.1    设置workbook&sheet   ...

  3. 网络协议 21 - RPC 协议(中)- 基于 JSON 的 RESTful 接口协议

        上一节我们了解了基于 XML 的 SOAP 协议,SOAP 的 S 是啥意思来着?是 Simple,但是好像一点儿都不简单啊! 传输协议问题     对于 SOAP 来讲,比如我创建一个订单, ...

  4. MVVM架构~knockoutjs系列之包括区域级联列表的增删改

    返回目录 这个例子我做了几次,之前总是有BUG,目前测试后,确定没有BUG才发上来的,主要功能是实现“我的银行”模块的增删改的功能,这个里面包括了级联列表的区域选择,这部分是难点,在开发过程中,我们应 ...

  5. iOS&colon;城市级联列表的使用

    1.介绍: 现在越来越多的项目都用到了地址,尤其是电商O2O的购物平台,我之前做的教育产品和电商产品都用到了,而实现地址的设置用到的技术就是城市级联列表,即普遍的做法就是自定义选择器控件UIPicke ...

  6. CDIF&colon; 基于JSON的SOA软件框架

    通用设备互联框架(CDIF)是一个具备中美知识产权保护的,基于web的连接框架,目前有部分开源实现存放在: GitHub - out4b/cdif: Common device interconnec ...

  7. CDIF:基于JSON的SOA软件框架

    通用设备互联框架(CDIF)是一个具备中美知识产权保护的,基于web的连接框架,目前有部分开源实现存放在: GitHub - out4b/cdif: Common device interconnec ...

  8. 拜拜了&comma;浮动布局-基于display&colon;inline-block的列表布局——张鑫旭

    一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...

  9. 基于bootstrup treeview多级列表树插件

    <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Double的精度问题

    /** * 自定义Math工具类 * */ public class MyMathTools { /** * 提供精确的小数位四舍五入处理. * * @param v * 需要四舍五入的数字 * @p ...

  2. 外网通过root账户访问虚拟机mysql

    http://www.cnblogs.com/live41/archive/2013/04/02/2995178.html

  3. 在android 6&period;0(API 23)中,Google已经移除了移除了Apache HttpClient相关的类

    推荐使用HttpUrlConnection,如果要继续使用需要Apache HttpClient,需要在eclipse下libs里添加org.apache.http.legacy.jar,androi ...

  4. javascript提升复习

    https://www.baidu.com/s?wd=JavaScript+%E9%A2%84%E8%A7%A3%E6%9E%90 http://www.cnblogs.com/HPNiuYear/a ...

  5. JDE报表开发笔记(数据选择及继承)

    在Section的Event中, Do Custom Section("sectionxxx")自定义加载下一个Section Set Selection Append Flag( ...

  6. 荣耀3X畅玩版狙击红米note!

    华为与小米的战争史,可以追溯到 红米 799,华为独立初荣耀品牌推出荣耀3C,定价798,就是比你少一快; 小米3 定价1999,华为出荣耀3X,定价1980; 最近的红米Note,标配版定价799, ...

  7. 「拒絕存取路徑 &&num;39&semi;C&colon;&bsol;Users&bsol;xxx&bsol;AppData&bsol;Local&bsol;Temp&bsol;Temporary ASP&period;NET Files&bsol;apname&bsol;3a1b3704&bsol;f7fc6d0c&bsol;App&lowbar;Code&period;l8ieogii&period;0&period;cs」的錯誤&excl;

    修改web.config中的system.web->compilation tag中,多加入tempDirectory="可存取的目錄"   <system.web&g ...

  8. How To Compile Qt with Visual Studio 2010

    This post is a step-by-step guide on how to compile Qt 4.x.x with MSVC 2010. Although we use Qt 4.7. ...

  9. python3把txt文件转换为csv文件

    #!/usr/bin/python# -*- coding: UTF-8 -*-import csvwith open('file.csv','a',newline='') as csvfile: s ...

  10. app推广及主要代码

    app推广:      一.基本情况       我们把推广和调研都放在了一起,主要是调研,主要通过调查问卷和直接访问的方式,让调查的人能够看到我们app的主要功能, 然后做出评价和对此改善的意见.调 ...