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. 用笔记本写C程序

    首先在Visual Studio Tools 文件中打开 Visual Studio 命令提示(2010),输入命令 notepad 打开记事本,写好程序保存,保存类型:所有文档  文件名:1.c . ...

  2. [小程序开发] 微信小程序内嵌网页web-view开发教程

    为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力.这意味着小程序的内容不再局限于pages和large,我们可以借助内嵌网页丰富小程序的内容.下面附上详细的开发教程(含视频操作以及注意事项) ...

  3. openstack学习心得：keystone 架构、概念、访问流程

    1.keystone 介绍及其组成 OpenStack Identity 服务提供了一个单一的功能集合,包括管理认证,授权和服务目录. Identity 服务通常作为和用户第一个交互的服务.一旦认证成 ...

  4. 《项目架构那点儿事》——快速构建Junit用例

    [前 言]按照惯例,在实际项目中我往往会对自己编写的程序进行测试,当测试通过后才能将其用于实战中,当然,编写单元测试是不可避免的,可以直接清晰的检验出 我们程序的可靠性.可只执行性,从中发现问题从而得 ...

  5. C#执行批处理命令

    using System.Diagnostics ; using System.IO; private void btnRun_Click(object sender, EventArgs e)    ...

  6. [转载] Gossip算法学习

    转载自http://blog.csdn.net/yfkiss/article/details/6943682/ 1. 概述gossip,顾名思义,类似于流言传播的概念,是一种可以按照自己的期望,自行选 ...

  7. Kaggle实战之一回归问题

    0. 前言 1.任务描述 2.数据概览 3. 数据准备 4. 模型训练 5. kaggle实战 0. 前言 "尽管新技术新算法层出不穷,但是掌握好基础算法就能解决手头 90% 的机器学习问题 ...

  8. Centos 6.9 安装 Redis 3.2.9

    依赖包和常用包yum install gcc gcc-c++ make zlib-devel readline readline-devel tkutil tk tkutil-devel tk-dev ...

  9. 利用Angular实现多团队模块化SPA开发框架

    0.前言 当一个公司有多个开发团队时,我们可能会遇到这样一些问题: 技术选项杂乱,大家各玩各 业务重复度高,各种通用api,登录注销,权限管理都需要重复实现(甚至一个团队都需要重复实现) 业务壁垒,业 ...

  10. 这次真的忽略了一些ActiveMQ内心的娇艳

    好久没总结了,内心有点空虚了,所以今天主要给园里的朋友们分享一点儿这几天使用ActiveMQ过程中踩过的小坑,虽然说这东西简单易用,代码几行配置也就几行,问题不大但是后果有点严重,所以就要必要总结一下 ...