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. 《Linux命令行与shell脚本编程大全》 第六章环境变量

    很多程序和脚本都通过环境变量来获取系统信息.存储临时数据和配置信息. 6.1 什么是环境变量: bash shell用一个叫环境变量(environment variable)的特性来存储有关shel ...

  2. java模拟登陆功能

    package test; import java.util.Scanner; public class Login { static Scanner sc=new Scanner(System.in ...

  3. 向ASP.NET Core迁移

    有人说.NET在国内的氛围越来越不行了,看博客园文章的浏览量也起不来.是不是要转Java呢? 没有必要扯起语言的纷争,Java也好C#都只是语言是工具,各有各的使用场景.以前是C#非开源以及不能在Li ...

  4. pt-log-player

    简介 pt-log-player是MySQL日志回放工具,在pt2.4中被去除,由percona-playback取代. 在2.1中还是保留,如果想使用的话,需要下载2.1版本的. 使用方法 pt-l ...

  5. 谈谈如何用eoLinker管理各类API接口及分享API接口管理小技巧教程

    在前后端分离的开发模式下,前后端往往需要接口文档来进行交互.我的上一篇随笔中已经写到用传统的文档写接口时,由于需求经常变动,接口文档也会随之变动.一开始,某接口信息已经写入文档,但后期因为需求变动,发 ...

  6. MySQL解压版配置步骤详细教程

    解压mysql到D盘根目录 在解压路径下复制my-default.ini,修改名称为my.ini 在my.ini内容如下 [client]default-character-set=utf8 [mys ...

  7. MyBatis开发学习记录

    使用MyBatis时主要是完成POJO和SQL的映射规则 MyBatis基本构成: SqlSessionFactoryBuilder SqlSessionFactory SqlSession SqlM ...

  8. web-故道白云&Clound的错误

    web-故道白云 题目: 解题思路: 0x01 首先看到题目说html里有秘密,就看了下源代码如图, 重点在红圈那里,表示输入的变量是id,当然上一行的method="get"同时 ...

  9. Java8 HashMap源码分析

    java.util.HashMap是最常用的java容器类之一, 它是一个线程不安全的容器. 本文对JDK1.8.0中的HashMap实现源码进行分析. HashMap使用位运算巧妙的进行散列并使用链 ...

  10. Docker技术浅谈：私有化部署的优势以及在顶象内部的应用实践

    顶象全景式业务安全风控体系基于新一代风控体系构建,并采用Docker技术进行私有云和公有云部署.本文主要和大家分享下Docker容器技术和顶象风控系统私有化部署的优势以及Docker容器技术在顶象内部 ...