电脑技术学习

帝国会员注册所在地区表单三级联动下拉菜单制作

dn001

  你还在为帝国没有联动菜单功能而发愁呢,现在不用愁了,通过制作无限级联动便可随心所欲,本教程是针对整合到帝国的针对性教程。

特别注意: 本文所用无限级联动类默认是UTF-8编码,请在使用前将JS文件转换成您需要的编码。

第一步:下载最本文所必须的JS文件,下载地址:

JS联动必须文件
文件类型: .rar JS联动必须文件(20.15 KB)

解压后将data_china.js和selects.js到你的网站随意目录准备调用。

第二步:打开后台管理 - 数据表管理 - 管理字段 - 增加如下三个字段

字段名:pro 标识:地区(省) 输入投稿表单替换html代码:<select name="pro"></select>
字段名:city 标识:地区(市) 输入投稿表单替换html代码:<select name="city"></select>
字段名:area 标识:地区(县) 输入投稿表单替换html代码:<select name="area"></select>

第三步,管理系统模型 - 修改该系统模型 - 把刚才新添加的三个字段设置为录入项等属性,并且勾选自动生成表单模版,录入和投稿都要选。

第四步,还是修改系统模型 ,这时候把下面已经生成的录入表单模版代码复制出来到你习惯的编辑器中编辑,比如DW或Editplus,在顶部增加JS调用代码,这时候就是要调用从build文件中提取的JS文件,你是不是已经放到你的站点目录了呢,那么记住你的路径,添加如下代码:

<script type="text/javascript" src="/你的路径/selects.js"></script>
<script type="text/javascript" src="/你的路径/data_china.js"></script>


然后在代码尾部增加如下代码,这是一段PHP代码+JS代码,用来判断是添加信息还是编辑信息的,添加信息的时候显示请选择地区,那么编辑信息的时候当然要读取数据库中已经添加的地区设置喽。

<?
if(empty($addr[pro]))
{
?>

<script type="text/javascript">
var s = selects;
//获取对象
var p = document.getElementsByName('pro')[0];//省
var c = document.getElementsByName('city')[0];//市
var a = document.getElementsByName('area')[0];//区
//绑定数据
s.bind(p,pro);
s.bind(c,city);
s.bind(a,area);
//确定从属关系
s.parent(p,c);
s.parent(c,a);
//设置默认值
</script>
<?
}

else
{
?>
<script type="text/javascript">
var s = selects;
//获取对象
var p = document.getElementsByName('pro')[0];//省
var c = document.getElementsByName('city')[0];//市
var a = document.getElementsByName('area')[0];//区
//绑定数据
s.bind(p,pro);
s.bind(c,city);
s.bind(a,area);
//确定从属关系
s.parent(p,c);
s.parent(c,a);
//设置默认值
s.selected(p,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($addr[pro]))?>'});
s.selected(c,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($addr[city]))?>'});
s.selected(a,{text:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($addr[area]))?>'});
</script>
<?; ;
}
?>


第五步,将代码粘贴回去,然后提交,从此以后千万不能再勾选自动生成表单模版了,不然你还要重新修改,提交完成了么,好,激动人心的时刻到了,去你的信息管理里面添加一条信息,看看是否已经有了非常牛X的地区三级联动了呢,添加信息以后再编辑这个信息,看看地区联动那里是不是直接显示你刚才设置的地区呢。