html源码代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ajax json jquery 菜单案例</title>

<style type="text/css">

*{margin:;padding:;}

body { font-size: 13px; line-height: %; padding: 60px }

</style>

<link rel="stylesheet" type="text/css" href="../css/style.css"/>

<script src="../js/jquery-2.1.1.min.js"></script>

<script type="text/javascript">

$(function(){

$("#first").change(function() {

var id=document.getElementById("first").value;

 $.ajax({

     type: "POST",

     url: "../data/menu.json",

     dataType: "json",

    success: function(data) {

        var secondRoot=document.getElementById("second");

        secondRoot.innerHTML=null;

        for(var i=;i<data.length;i++)

        {

            if(data[i].cid==id)

            {

                for( var j=;j<data[i].cname.length;j++)

                {

                    var op = document.createElement("option");

                    op.innerHTML=(data[i].cname)[j];

                    secondRoot.appendChild(op);

                }

            }

        }

    },

    error:function(data){

        alert(data);

    }

    });

});

});

</script>

</head>

<body>

   <select name="first" id="first" style="width:160px">

        <option value="">---请选择---</option>

        <option value="" >中国</option>

        <option value="">美国</option>

        <option value="">英国</option>

    </select>

    <select name="second" id="second" size="" style="width:160px"></select>

</body>

</html>

json源代码

[

    {

        "cid": "",

        "cname": [

            "子菜单1",

            "子菜单1",

            "子菜单1"

        ]

    },

    {

        "cid": "",

        "cname": [

            "子菜单2",

            "子菜单2",

            "子菜单2"

        ]

    },

    {

        "cid": "",

        "cname": [

            "子菜单3",

            "子菜单3",

            "子菜单3"

        ]

    }

]

json文件_ajax的更多相关文章

  1. ASP.NET Core 在 JSON 文件中配置依赖注入

    前言 在上一篇文章中写了如何在MVC中配置全局路由前缀,今天给大家介绍一下如何在在 json 文件中配置依赖注入. 在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等 ...

  2. ios项目里扒出来的json文件

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...

  3. C#解析json文件的方法

    C# 解析 json JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集. JSON采用完全独立于语言的 ...

  4. Json.NET读取和写入Json文件

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  5. 纯前端JSON文件编辑器[0]

    准备工作 参考资料: FileReader(用来获取上传文件的数据) <download>(用来设置下载文件的名称) Blob(用来存储数据的一个容器) createObjectURL(用 ...

  6. gulp-rev同时将js和css文件写在一个rev-manifest.json文件里面的方式探讨

    参考: https://segmentfault.com/q/1010000002876613 https://github.com/sindresorhus/gulp-rev 测试发现,在官网上最主 ...

  7. Elasticsearch集群状态脚本及grafana监控面板导出的json文件

    脚本文件: #!/usr/bin/env python import datetime import time import urllib import json import urllib2 imp ...

  8. grafana日志分析界面及导出的json文件

    日志分析面板导出的json文件,效果图如下: 下载地址:http://files.cnblogs.com/files/xiaoming279/%E9%9D%A2%E6%9D%BF.zip 主机面板 主 ...

  9. 访问本地json文件因跨域导致的问题

    我使用jquery的getJSON的方法获取本地的json文件,并进行操作,获取json 数据代码如下: $.getJSON("invite_panel.json",functio ...

随机推荐

  1. Intellij16创建Spring-Mybatis项目创(填)建(坑)记录，解决IDEA下找不到xml文件的问题

    转入Intellij已经有1个月了,编程效率确实比Eclipse快了很多,而且可以直接使用Maven,然后就想写个小项目玩玩,架构搭建完后,想着万事俱备,又不是第一次玩框架,照葫芦画瓢撑死半天就能完成 ...

  2. 二：熟悉 TCP/IP 协议

    一篇文章带你熟悉 TCP/IP 协议(网络协议篇二) 同样的,本文篇幅也比较长,先来一张思维导图,带大家过一遍. 一图看完本文 一. 计算机网络体系结构分层 计算机网络体系结构分层计算机网络体系结构分 ...

  3. SSD中的GC机制以及Trim

    GC(Garbagecollection)垃圾回收  所谓GC就是把一个闪存块里的"有效"页数据复制到一个"空白"块里,然后把这个块完全擦除.GC是 SSD里的 ...

  4. 基础拾遗-----mongoDB操作

    基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...

  5. RabbitMQ消息队列系列教程（一）认识RabbitMQ

    摘要 RabbitMQ是最为流行的消息中间件,是处理高并发业务的利器.本系列教程,将跟大家一起学习RabbitMQ. 目录 RabbitMQ是什么? RabbitMQ的特点是什么? 一.RabbitM ...

  6. Linux 性能搜集【linux_reports-cpu/memory/disks/network】

    为方便问题发生后,问题原因的分析排查,我们可以在服务器中事先部署如下脚本,方便故障发生后,问题原因的分析排查 脚本部署方法: 1.将脚本[linux_reports.sh]上传到服务器 2.登陆虚拟机 ...

  7. Celery 源码解析七：Worker 之间的交互

    前面对于 Celery 的分布式处理已经做了一些介绍,例如第五章的 远程控制 和第六章的 Event机制,但是,我认为这些分布式都比较简单,并没有体现出多实例之间的协同作用,所以,今天就来点更加复杂的 ...

  8. [动态规划]P1220 关路灯

    题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉这些路灯. 为了给村 ...

  9. 关于svg

    动画:css3动画,canvas(js动画),svg(html动画). svg基本元素 version: 表示 <svg> 的版本,目前只有 1.0,1.1 两种 xmlns:http:/ ...

  10. iOS11UINavigationBar的item左右间距调整

    相信很多同学都知道在iOS7之后调整导航栏两侧按钮距离左右间距,其实就是在左右barButtonItem的数组中添加一个宽度为负的占位item. - (void)addLeftBarButtonIte ...