<!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}
<head><meta charset="UTF-8">
<title></title>
<style type="text/css">
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit
}
body {
background: #fafafa
font-family: "Roboto", sans-serif
font-size: 14px
margin: 0
}
a {
text-decoration: none
}
.container {
width: 1000px
margin: auto
}
/* Navigation Styles */
nav {
background: #2ba0db
}
nav ul {
font-size: 0
margin: 0
padding: 0
}
nav ul li {
display: inline-block
position: relative
}
nav ul li a {
color: #fff
display: block
font-size: 14px
padding: 15px 14px
transition: 0.3s linear
}
nav ul li:hover {
background: #126d9b
}
nav ul li ul {
border-bottom: 5px solid #2ba0db
display: none
position: absolute
width: 250px
}
nav ul li ul li {
border-top: 1px solid #444
display: block
}
nav ul li ul li:first-child {
border-top: none
}
nav ul li ul li a {
background: #373737
display: block
padding: 10px 14px
}
nav ul li ul li a:hover {
background: #126d9b
}
nav .fa.fa-angle-down {
margin-left: 6px
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.navs li').hover(function(){
$(this).find(".submenu").stop(true,true).slideDown(500)
},function(){
$(this).find(".submenu").slideUp()
})
})
</script>
</head>
<body>
<nav>
<div class="container">
<ul class="navs">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">
Categories <i class='fa fa-angle-down'></i>
</a>
<ul class="submenu">
<li>
<a href="#">Category One</a>
</li>
<li>
<a href="#">Category Two</a>
</li>
<li>
<a href="#">Category Three</a>
</li>
</ul>
</li>
<li class='sub-menu'>
<a href="#">
Services <i class='fa fa-angle-down'></i>
</a>
<ul class="submenu">
<li>
<a href="#">Service One</a>
</li>
<li>
<a href="#">Service Two</a>
</li>
<li>
<a href="#">Service Three</a>
</li>
<li>
<a href="#">Service Four</a>
</li>
<li>
<a href="#">Service Five</a>
</li>
<li>
<a href="#">Service Six</a>
</li>
</ul>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
你是不是没有加上jquery的版本啊，你可以选着在本地链接一个jquery库，或者像我这样加上一个cdn加速的服务器上的jquery，然后将你的js代码改掉了，建议你给标签加上class属性这样好控制其样式和js
