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. canvas图表(1) - 柱状图

    原文地址:canvas图表(1) - 柱状图 前几天用到了图表库,其中百度的ECharts,感觉做得最好,看它默认用的是canva,canvas图表在处理大数据方面比svg要好.那我也用canvas来 ...

  2. Skylin CityBuilder 6.6.1 提示授权过期解决(License Manager中显示未过期)

    最近工作中使用到Skyline 系列软件,授权一切正常,启动CityBuilder时提示授权过期 运行License Manger之后查看授权状态 ' 一切正常,并没有出现授权过期等情况. 如何解决: ...

  3. Python - SIP参考指南 - 介绍

    介绍 本文是SIP4.18的参考指南.SIP是一种Python工具,用于自动生成Python与C.C++库的绑定.SIP最初是在1998年用PyQt开发的,用于Python与Qt GUI toolki ...

  4. ImageAnimator类方法(动画设计)

    ImageAnimator类常用方法如表所示. 表    ImageAnimator类常用方法 方法 说明 Animate 将多帧图像显示为动画 CanAnimate 返回一个布尔值,该值指示指定图像 ...

  5. C#链接数据库增删改查的例子

    以users表为例,有三个字段,自增长的编号id,int类型:名称name,nvarchar类型,密码pwd,nvarchar类型首先在vs2005中引入using System.Data.SqlCl ...

  6. Next week plan

    1.get a job 2.write a high performance chatroom with encryption.  Use scala. Next Week turn to Rust

  7. Ubuntu安装pyenv实现多版本控制

    Ubuntu安装pyenv实现多版本控制 git clone git://github.com/yyuu/pyenv.git ~/.pyenv echo 'export PYENV_ROOT=&quo ...

  8. ionic3中NavController类push setRoot相关问题解决

    今天在测试app的时候发现,登录页跳转到首页后,会加载两次数据.百思不得其解,查看了所有代码也没能发现问题.最终抱着尝试的态度,动了如下代码: if (suc) { //this.navCtrl.pu ...

  9. cinder块存储控制节点

    #cinder块存储控制节点 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #cinder块存储控制节点 #在控制 ...

  10. HDU 3549 Flow Problem 网络流（最大流） FF EK

    Flow Problem Time Limit: 5000/5000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Tot ...