<!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>
在phpcms中，联动菜单的管理位置位于“后台-扩展-联动菜单”，支持自定义添加。因为问题中没有具体说明在哪里调用，那我就从使用于开发的几个角度来讲联动菜单的调用：
一、我们常用的是在自定义数据模型字段中：
创建的联动菜单项将应用于后台内容(文章)添加界面。在“后台-内容-数据模型-字段管理-添加字段”中，字段类型设置为“联动菜单”，然后在“菜单id”选项处通过联动菜单列表选择你要使用的菜单，例如地区联动菜单，并可设定联动菜单的返回值的方式。然后在内容添加编辑界面可出现此联动菜单项了。
主要设置颜色如下：
编辑界面显示效果如下：
当然，菜单显示样式（下拉式、弹窗式）可在“后台-扩展-联动菜单-修改”中配置。
二、在phpcms模板中直接调用联动菜单：
此方法不常用。具体方法是来到“后台-扩展-联动菜单列表”，你会看到每一个联动菜单都有一个调用代码，将此代码复制粘贴到你想放的模板位置即可。
但根据经验，这还不够，因为虽然通过此代码把联动菜单掉出来了，但是因为缺乏此菜单显示时的css、js文件导致缺乏样式与效果从而显示不正常，所以需要保证你的模板里同时引入了一下几个文件：
statics/js/dialog.js
statics/js/linkage/js/pop.js
statics/css/dialog.css
三、在php文件中或者在模板中使用万能标签直接读取联动菜单数据表中的数据：
此方法往往在我们进行二次开发中使用。联动菜单数据存放在v9_linkage数据表中，可根据字段parentid等字段指定获取不同层级数据。
因为开发相关会涉及到phpcms的相关类方法或函数相对来说比较复杂，这里就不详细讲解了，具体可参考官方开发手册以及iphpcms的视频教程，这里给出演示代码以作了解：
php程序中调用代码演示：
$linkage_db = pc_base::load_model("linkage_model") //引入模型$data = $linkage_db->select(array('parentid'=>0)) //读取指定条件的数据
模板中万能标签写法演示：
{pc:get sql="select * from phpcms_linkage where parentid=0 and keyid=1" num="99"}{loop $data $v}
<li>省份：{$v[name]}</li>
{/loop}
{/pc}
本方法中获取的是原始的数据表数据，没有签名方法中的相关html代码css样式等修饰，自己根据需求进行相应处理渲染即可。
PS: 1. 以上方法前两个偏向于系统应用，后者偏向于开发，希望对你有所帮助吧。如果仍有疑惑可以追问。2.考虑的你说的“联动菜单”有指“导航条联动下拉效果”的嫌疑，这里附注一段调用演示代码：
{pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"}<li><div><a href="{siteurl($siteid)}/"><span>网站首页</span></a></div></li>
{loop $data $k $v}
<li><div>
<a href="{$v[url]}"><span>{$v[catname]}</span></a>
<ul class="sub_mune_ul" style="display: none ">
{pc:content action="category" catid="$k" num="10" siteid="$siteid" order="listorder ASC"}
{loop $data $r} <li><a href="{$r[url]}">{$r[catname]}</a></li> {/loop}
{/pc}
</ul></div></li>
{/loop}
{/pc}
首先要搞懂这2个是干什么的：
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作等。
css是一种用来表现HTML或XML等文件样式的语言。比如，使用CSS可以更加灵活地控制具体的页面外观，从精确的布局定位到特定的字体和样式。
这2种都是用来做网页的语言，只是使用功能不一样，当然，JS现在可以用来做服务器端开发了。
