下面是个例子，实测了的，你可以根据需要进行优化：
<!DOCTYPE html>
<html>
<head>
<title>menu</title>
<script type="text/javascript">
function chgimg(src)
{
var img=document.getElementById("img")
img.src=src+".jpg"
}
</script>
</head>
<body>
<div>
<p><img src="a1.jpg" id="img" /></p>
<p><ul><li onclick="chgimg('a2')">a</li><li onclick="chgimg('a3')">b</li><li onclick="chgimg('a1')">c</li></ul></p>
</div>
</body>
</html>
给你一个JQ的三级联动：<!doctype html>
<html>
<head>
<title></title>
<meta charset = "utf-8"/>
</head>
<style>
</style>
<body>
<select id="one">
<option value="">请选择省份</option>
</select>
<select id="two">
<option value="">请选择城市</option>
</select>
<select id="three">
<option value="">请选择区域</option>
</select>
<script type="text/javascript" src="js/jquery-1.12.0.js"></script>
<script type="text/javascript">
/*
1.搭建框架
2.给省份和城市绑定change事件
*/
$(function(){
var province = [
{"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
},
{"name" : "浙江省" ,
"city" : [
{
"name" : "杭州市" ,
"area" : ["上城区","下城区","江干区","西湖区"]
},
{
"name" : "丽水" ,
"area" : ["莲都区","松阳县","遂昌县","云和县"]
}
]
},
{"name" : "江西省" ,
"city" : [
{
"name" : "南昌市" ,
"area" : ["东湖区","西湖区","青云谱区","湾里区"]
},
{
"name" : "九江市" ,
"area" : ["浔阳区","庐山区","瑞昌市","九江县"]
},
{
"name" : "赣州市" ,
"area" : ["章贡区","南康区","上犹县","赣县"]
}
]
},
]
// 二级联动
$("#two").change(function(){
var one_index = $("#one option:selected").index()
var two_index = $("#two option:selected").index()
var three = $("#three")
three.empty().append("<option>请选择区域</option>")
if(two_index > 0){
var area = province[one_index-1].city[two_index-1].area
for(var i = 0 i < area.length i++){
three.append("<option>"+area[i]+"</option>")
}
}
})
// 一级联动
$("#one").change(function(){
var one_index = $("#one option:selected").index()
var two = $("#two")
console.log(one_index)
two.empty().append("<option>请选择城市</option>")
$("#three").empty().append("<option>请选择区域</option>")//清除
if(one_index > 0){
var city = province[one_index-1].city
console.log(province[one_index-1].city)
for(var i = 0 i < city.length i++){
two.append("<option>"+city[i].name+"</option>")
}
}
})
init()
function init(){
for(var i = 0 i < province.length i++){
$("#one").append("<option>"+province[i].name+"</option>")
}
}
})
</script>
</body>
</html>
在这篇文章中，我们将展示如何创建乖巧离线的网页和应用程序使用下面的HTML5功能：
AppCache本地存储文件资源，离线访问它们作为URL
索引型数据库存储结构化数据在本地，你可以访问和查询它
DOM存储在本地存储少量的文字信息，
离线事件来检测，如果你€ 重新连接到网络
例：随时随地访问数据的离线支持
让我们€™的说，你去购物，从您 最喜爱的食品网站 的配方的打印输出，但是当你€™重新在市场上，你塔卡纳€™吨找到一些关键的成分。
试想一下，当你在家中使用移动PC浏览 食谱网站 ，部分网站会自动下载离线使用。这可以让你把你的手机PC到店，访问该网站，并在市场寻找一个新的配方。 最好的部分 是，你可以做到这一点， 而 被连接到网络。作为一个消费者，您的网站感激，因为它只是工作时，你需要它。
离线的'蛋糕'这个词使用的食谱网站的搜索结果。
作为一个开发者，你可以使这些类型的场景相结合的离线技术： AppCache ，索引型数据库 ， DOM存储 ， WebSockets的 （或 XHR ）。 在探索个人的技术，让我们的探讨的好处。
Metro风格的应用程序和网站，离线技术让你来处理连接故障。想象一下，您的用户填写一个表格，他失去网络连接。您的网站或Metro风格的应用程序应该怎么做呢？连接自由发展的心态可以让您的应用程序是否连接到网络或不正确地独立工作。你的应用程序将正常工作。
在更复杂的情况下，Web站点和应用程序允许用户创建新的内容，并存储新的数据，即使应用程序是完全脱机。试想一下，无缝地工作在脱机状态下，如Outlook今天的Outlook Web Access（OWA）的Hotmail或GMail。
离线技术也可以通过本地缓存的资源服务，预缓存将来信息和转移从云（或网络）到客户端设备的处理能力，提高整体性能。信息越多，你€™重新能够缓存在本地，在本地搜索，并计算在本地服务器和用户的体验将更快，需要更少的资源热转印机 。
有一个Metro风格的应用程序离线工作的期望高于网站的脱机工作。因为他们使用从商店的自我包含的程序包部署，用户希望他们有某种类型的离线功能（如游戏，书籍，食谱等）。即使这些应用程序是无法创建或访问新的内容，以前的内容应该是可见的（例如联系人，会议，饲料，杂志等）。
本地缓存文件资源使用AppCache
AppCache使您能够创建长寿命的本地缓存下载的文件资源，资源可以访问而离线或使用的同时在线，以提高性能。试想一下，一个三岁的孩子使用一台笔记本电脑，下载一个交互式的Web的游戏（KidsBook）从您的家庭网络。如果应用程序的资源存储在本地，孩子可以继续在车上玩游戏，那里没有网络连接。
如果KidsBook使用AppCache，本场比赛将有缓存必要的资源（的JavaScript，HTML，CSS，音频，视频等）时，先下载后从网络上断开时，播放的游戏。这可以让孩子保持愉悦，即使设备本身没有网络连接。
AppCache创作流程。
要看到如何启用互动网页游戏脱机工作，检查出 KidsBook的 IE Test Drive网站 上的例子。
AppCache使用一个manifest文件，以缓存的内容从网站上指定资源的URI。幕后发生后，浏览器显示网页，它允许在清单文件中定义的资源被下载的缓存。这保证了资源下载到本地机器上，作为一个单位在一个事务中，创建一个本地的缓存。如果一个单一的资源下载失败，没有创建高速缓存。要更新存储在缓存中的内容，在您的服务器更新清单文件。当用户下次访问该网站时，浏览器比较明显的服务器上的文件的缓存副本。如果缓存的舱单副本是不同的服务器副本，新版本更新清单文件中定义的内容高速缓存的使用。
AppCache还允许Internet Explorer和Metro风格的应用程序在脱机状态下使用传统的URL的访问缓存的资源。这可以让你在浏览器窗口中键入一个URL，并没有任何网络连接的情况下访问此信息。此外，脱机页可以解决的URI使用本地缓存的信息。代码示例来看看在 HTML5应用程序缓存（“œAppCacheâ） 部分中的 IE10开发人员指南 。
总体而言，AppCache提供了一定的优势HTTP的缓存。HTTP缓存没有吨保证缓存的资源之后将TIF（临时Internet文件）将被清除。此外，HTTP缓存没有€™吨正确地解决在脱机状态下的URL。然而，HTTP缓存可用于优化AppCache的行为，通过指定的缓存资源的生命周期。如果从网站上下载或复制的资源从缓存的本地高速缓存中创建一个新的版本时，这将决定。
Metro风格的应用可以受益于AppCache通过在本地缓存的Web资源的访问的页框，它允许脱机访问的内容。
高速缓存大型本地使用索引型数据库的结构化数据
索引型数据库 是一个本地JavaScript对象存储在本地机器上的数据库，允许快速索引和搜索的对象。前面介绍的 食谱网站， 包括16食谱从父站点中提取的数据库。想象一下，用一个RSS feed，一个WebSocket或XHR连接的，定期更新这个数据库。这将使您的用户能够访问到最新的食谱，即使他们有没有网络连接。
索引型数据库，您可以直接操作和索引的JavaScript对象。使用索引型数据库搜索本地信息的优点是它不会强迫你总是在云中搜索，降低了计算成本。这是假设你€™重新能够维持，是缓存在本地系统中的数据的相关性。
