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. 实现一个websocket服务器-理论篇

    本文是Writing WebSocket servers的中文文档,翻译自MDNWriting WebSocket servers.篇幅略长,个人能力有限难免有所错误,抛砖引玉共同进步. websoc ...

  2. 收集—— css实现垂直居中

    Method1: 在父元素上设置display:table-cell;vertical-align:middle(父元素不能设置浮动) Method2: 使用flex:父元素设置成display: f ...

  3. 几种文件查找命令，whereis ,find ,locate.

    whereis对于文件的查找,是将系统内的所有文件放在一个数据库文件里.whereis 和 locate 都是以该数据库为准的(由于每个数据库会有一个更新时间,一般在更新时间之后才可以找到).而fin ...

  4. C#中split分隔字符串的应用

    .用单个字符来分隔:string str="aaajbbbjccc";string[] sArray=str.Split('j');foreach(string i in sArr ...

  5. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  6. [C#源代码]使用SCPI指令对指定通信端口(RS232/USB/GPIB/LAN)的仪器编程

    本文为原创文章,源代码为原创代码,如转载/复制,请在网页明显位置标明原文名称.作者及网址,谢谢! 本软件是基于NI-VISA/VISA32(Virtual Instrument Software Ar ...

  7. 使用face_recognition批量识别图片中的人数

    #使用face_recognition实现从图片中选中人数并分别输出txtimport face_recognition import cv2 import os fin = 'D:\\Users\\ ...

  8. CSS实现盒子高度撑开且以最高的为高

    前端开发中,常常会有需求两个盒子并排排列,高度以最高的为准,且高度是内容撑开的,类似于这样 如果不是用 table 布局,而是用 div 布局,两个子盒子浮动来实现的话,实际上默认写出来是这样的 此时 ...

  9. SQL Server 结构分解

    关系引擎和存储引擎是SQL Server 的两大组件,其中关系引擎也叫查询处理器,它包括查询优化器.命令解析器.查询执行器.存储引擎管理所有的数据及涉及的IO,它包括事务管理器和数据访问方法和缓冲区管 ...

  10. 多服务器操作利器 - Polysh

    多台服务器下的痛苦人生 分布式架构下的系统,可以说每个服务都是分别部署在多台服务器上的,有的甚至还需要多机房,在这种架构下可以说可以很好的做到了易扩展.容灾等功能.推荐的服务部署为一服务多机器.一机器 ...