json文件

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:0;padding:0;}
body { font-size: 13px; line-height: 130%; 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=0;i<data.length;i++){if(data[i].cid==id){for( var j=0;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="0">---请选择---</option><option value="1" >中国</option><option value="2">美国</option><option value="3">英国</option></select><select name="second" id="second" size="3" style="width:160px"></select>
</body>
</html>

json源代码

[{"cid": "2","cname": ["子菜单1","子菜单1","子菜单1"]},{"cid": "1","cname": ["子菜单2","子菜单2","子菜单2"]},{"cid": "3","cname": ["子菜单3","子菜单3","子菜单3"]}]

转载于:https://www.cnblogs.com/excellencesy/p/7905565.html

json文件_ajax相关推荐

Json文件解析（下
Json文件解析(下) 代码地址:https://github.com/nlohmann/json 从STL容器转换任何序列容器(std::array,std::vector,std::deque, ...
Json文件解析（上）
Json文件解析(上) 代码地址:https://github.com/nlohmann/json 自述文件 alt=GitHub赞助商 data-canonical-src="https: ...
VsCode允许JSON文件注释
打开设置面板输入Files: Associations搜索出此项在此处添加项: 项 *.json 值 jsonc 然后你的JSON文件注释就不报错了~
Go 学习笔记（20）— Go 操作 json 文件（编码生成 json、解码 json 为 map、解码 json 为 struct）
1. Json 概述 Go 语言对于标准格式的编码和解码都有良好的支持,由标准库中的 encoding/json . encoding/xml . encoding/asn1 等包提供支持并且这类包都 ...
Newtonsoft.Json文件错误
今天,在一个项目中使用signalR,由于项目框架是.net 4.0,所以用signalR1.0版本,signalR使用需要newtonsoft.Json文件,它把原 newtonsoft.Json ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
IDEA Java解析GeoJson.json文件
IDEA Java解析GeoJson.json文件一.遇到的问题 1. 无法导入成功 2. org.geotools.StyleFactory is not an ImageIO SPI class ...
netcore读取json文件_.net core读取json格式的配置文件
在.Net Framework中,配置文件一般采用的是XML格式的,.NET Framework提供了专门的ConfigurationManager来读取配置文件的内容,.net core中推荐使用j ...
Angular应用中tsconfig.json文件配置说明及配置全局路径映射
tsconfig.json文件配置说明 1. tsconfig.json文件中的选项配置 2. 配置全局路径映射 1. tsconfig.json文件中的选项配置 TypeScript编译器配置文件的 ...
C++简单使用Jsoncpp来读取写入json文件
一.源码编译 C++操作json字符串最好的库应该就是jsoncpp了,开源并且跨平台.它可以从这里下载. 下载后将其解压到任意目录,它默认提供VS2003和VS2010的工程文件,使用VS2010可 ...

json文件_ajax

json文件_ajax相关推荐

最新文章

热门文章