您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程

织梦cms同一页面调用多个相同的js联动菜单的方法

张豆焕2023-09-17DedeCMS教程已有人查阅

导读将上面代码保存为新的js文件,注意不要覆盖官方原来的,否则可能因为后续的多级联动菜单添加而反复修改文件

<!--

//选择地区的二级分类(非通用调用)
function selNext(oj, v)
{
var newobj = oj.options;
var selv = parseInt(v);
var maxv = parseInt(v) + 500;
while(newobj.length > 0) {
oj.remove(0);
}
clear(oj);
if(selv==0)
{
aOption = document.createElement('OPTION');
aOption.text = '具体地区';
aOption.value = '0';
oj.options.add(aOption);
return;
}
else
{
aOption = document.createElement('OPTION');
aOption.text = '具体地区';
aOption.value = '0';
oj.options.add(aOption);
}
var str = '';
for(i=selv+1; i < maxv; i++)
{
if(!em_nativeplaces[i]) continue;
aOption = document.createElement('OPTION');
aOption.text = em_nativeplaces[i];
aOption.value = i;
oj.options.add(aOption);
}
}


//子类改变事件
function ChangeSon()
{
/*
var emname = this.name.replace('_son', '');
var topSelObj = document.getElementById(emname+'_top');
if(this.options[this.selectedIndex].value==0) {
document.getElementById('hidden_'+emname).value = topSelObj.options[topSelObj.selectedIndex].value;
}
else {
document.getElementById('hidden_'+emname).value = this.options[this.selectedIndex].value;
}
*/
// 由于支持3级联动,所以这里需要对自己改变进行重构
var emname = this.name.replace('_son', '');
// alert(emname);
if( document.getElementById(idname+'_sec') )
{
var oj = document.getElementById(idname + '_sec');
}
else
{
var oj = document.createElement('select');
oj.name = emname + '_sec';
oj.id = idname + '_sec';
oj.onchange = ChangeSec;
}
var v = this.options[this.selectedIndex].value;
document.getElementById('hidden_'+idname).value = v;
var newobj = oj.options;
var selarr = eval('em_'+emname+'s');

var selv = parseInt(v);
var maxv = parseInt(v) + 0.5;
// alert(maxv);
i = 0;
while(newobj && newobj.length > 0) oj.remove(0);
clear(oj);
if(selv == 0)
{
aOption = document.createElement('OPTION');
aOption.text = '请选择..';
aOption.value = '0';
oj.options.add(aOption);
return;
}
else
{
aOption = document.createElement('OPTION');
aOption.text = '请选择..';
aOption.value = '0';
oj.options.add(aOption);
}
var str = '';
var j=0;
for(i = selv + 0.001; i < maxv; i = FloatAdd(i, 0.001))
{
if(!selarr[i]) continue;
aOption = document.createElement('OPTION');
aOption.text = selarr[i];
aOption.value = i;
oj.options.add(aOption);
j++;
}
if(j > 0) document.getElementById('span_'+idname+'_sec').appendChild(oj);
else document.getElementById('span_'+idname+'_sec').innerHTML = "";
}

// 改变第三级的事件
function ChangeSec()
{
var emname = this.name.replace('_sec', '');
var topSelObj = document.getElementById(idname+'_top');
if(this.options[this.selectedIndex].value==0) {
document.getElementById('hidden_'+idname).value = topSelObj.options[topSelObj.selectedIndex].value;
}
else {
document.getElementById('hidden_'+idname).value = this.options[this.selectedIndex].value;
}
}

//顶级类改变事件
function selNextSon()
{
var emname = this.name.replace('_top', '');
var idname = this.id.replace('_top', '');
if( document.getElementById(idname+'_son') )
{
var oj = document.getElementById(idname + '_son');
}
else
{
var oj = document.createElement('select');
oj.name = emname + '_son';
oj.id = idname + '_son';
oj.onchange = ChangeSon;
}
var v = this.options[this.selectedIndex].value;
document.getElementById('hidden_'+idname).value = v;
var newobj = oj.options;
var selarr = eval('em_'+emname+'s');
var selv = parseInt(v);
var maxv = parseInt(v) + 500;
while(newobj && newobj.length > 0) oj.remove(0);
clear(oj);
if(selv==0)
{
aOption = document.createElement('OPTION');
aOption.text = '请选择..';
aOption.value = '0';
oj.options.add(aOption);
return;
}
else
{
aOption = document.createElement('OPTION');
aOption.text = '请选择..';
aOption.value = '0';
oj.options.add(aOption);
}
var str = '';
for(i=selv+1; i < maxv; i++)
{
if(!selarr[i]) continue;
aOption = document.createElement('OPTION');
aOption.text = selarr[i];
aOption.value = i;
oj.options.add(aOption);
}
document.getElementById('span_'+idname+'_son').appendChild(oj);
}


// 根据数组生成多级联动菜单
function MakeTopSelect(emname,idname, selvalue)
{
var selectFormHtml = '';
var aOption = null;
var selObj = document.createElement("select");
selObj.name = emname + '_top';
selObj.id = idname + '_top';
selObj.onchange = selNextSon;
var selarr = eval('em_'+emname+'s');
// alert(selarr[1002.2]);
var topvalue = 0;
var sonvalue = 0;
var secvalue = 0;

aOption = document.createElement('OPTION');
aOption.text = '请选择..';
aOption.value = 0;
selObj.options.add(aOption);

// alert(selvalue);
if(selvalue % 500 == 0 )
{
topvalue = selvalue;
}
// 如果是小数,则依次取出顶级数值,二级数值以及三级数值
else if(!!(selvalue % 1))
{
secvalue = selvalue;
sonvalue = Math.floor(selvalue);
topvalue = sonvalue - (sonvalue % 500);
// alert(secvalue);
}
else {
sonvalue = selvalue;
topvalue = selvalue - (selvalue % 500);
}

for(i = 500; i <= selarr.length; i += 500)
{
if(!selarr[i]) continue;
aOption = document.createElement('OPTION');
if(i == topvalue) {
aOption = document.createElement('OPTION');
aOption.text = selarr[i];
aOption.value = i;
selObj.options.add(aOption);
aOption.selected = true;
}
else {
aOption = document.createElement('OPTION');
aOption.text = selarr[i];
aOption.value = i;
selObj.options.add(aOption);
}
}
document.getElementById('span_'+idname).appendChild(selObj);

//如果子类存在值,创建子类
//if(sonvalue > 0 || topvalue > 0) {
selObj = document.createElement("select");
selObj.name = emname + '_son';
selObj.id = idname + '_son';
selObj.onchange = ChangeSon;
aOption = document.createElement('OPTION');
aOption.text = '请选择..';
aOption.value = 0;
selObj.options.add(aOption);

//当大类有值输出子类
if(topvalue > 0)
{
var selv = topvalue;
var maxv = parseInt(topvalue) + 500;
for(i = selv + 1; i < maxv; i++)
{
if(!selarr[i]) continue;
aOption = document.createElement('OPTION');
if(i == sonvalue) {
aOption = document.createElement('OPTION');
aOption.text = selarr[i];
aOption.value = i;
selObj.options.add(aOption);
aOption.selected = true;
}
else {
aOption = document.createElement('OPTION');
aOption.text = selarr[i];
aOption.value = i;
selObj.options.add(aOption);
}
}
}
document.getElementById('span_'+idname+'_son').appendChild(selObj);

// 若存在第三级则创建
if(secvalue > 0)
{
selObj = document.createElement("select");
selObj.name = emname + '_sec';
selObj.id = idname + '_sec';
selObj.onchange = ChangeSec;
aOption = document.createElement('OPTION');
aOption.text = '请选择..';
aOption.value = 0;
selObj.options.add(aOption);

var selv = sonvalue;
var maxv = parseInt(sonvalue) + 0.5;
// alert(maxv);
i = 0;
for(i = selv + 0.001; i < maxv; i = FloatAdd(i, 0.001))
{
if(!selarr[i]) continue;
aOption = document.createElement('OPTION');
if(i == secvalue) {
aOption = document.createElement('OPTION');
aOption.text = selarr[i];
aOption.value = i;
selObj.options.add(aOption);
aOption.selected = true;
}
else {
aOption = document.createElement('OPTION');
aOption.text = selarr[i];
aOption.value = i;
selObj.options.add(aOption);
}
}
}
document.getElementById('span_'+idname+'_sec').appendChild(selObj);
}

// 两个小数相加进度计算
function FloatAdd(arg1, arg2)
{
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}

//清除旧对象
function clear(o)
{
l=o.length;
for (i = 0; i< l; i++){
o.options[1]=null;
}
}
-->
将上面代码保存为新的js文件,注意不要覆盖官方原来的,否则可能因为后续的多级联动菜单添加而反复修改文件
<script language="javascript" type="text/javascript" src="你自定义的js文件目录"></script>
这句不多说
注意在页面的运行脚本中,原来的两个参数改成了三个,第一个是联动类型的英文名称,具体请在后台查看
第二个参数是你自定义的id,防止页面上出现重复id的现象,第三个参数是初始选项
<script language="javascript" type="text/javascript">MakeTopSelect("MyArea","IdName", 0);</script>

本文标签:

很赞哦! ()

相关源码

  • 响应式HTML5家居建材办公家具桌椅pbootcms模板为家居建材、办公家具企业打造的响应式网站模板,同时支持多行业快速适配通过替换文字图片即可转型为其他行业官网,大幅降低开发成本。查看源码
  • (自适应)家政保洁保姆打扫卫生清灰服务pbootcms模板免费下载采用手工编写的DIV+CSS架构,代码结构清晰无冗余,加载速度优异。响应式设计适配各类终端设备,保障手机、平板、电脑端的一致浏览体验。查看源码
  • html5响应式pbootcms模板新闻资讯博客网站源码该模板采用PbootCMS内核开发,专为新闻资讯类网站打造,同时具备高度行业适配性--只需替换图文内容即可快速转型为企业官网、行业门户等各类站点。查看源码
  • 帝国cms7.5女性护肤搭配美妆潮流网站源码带数据4.5G本模板专为女性美容护肤行业设计,提供美容护肤、发型设计、女性健康、时尚化妆、娱乐新闻、服饰搭配等女性潮流资讯内容展示。采用帝国CMS7.5开发,同步生成电脑端和手机端,满足用户对美容时尚信息的获取需求。查看源码
  • (自适应)刷卡pos机数据移动支付设备电子科技pbootcms模板下载本模板为POS机设备制造商、移动支付终端服务商和科技企业设计,基于PbootCMS系统开发,提供完整的在线展示平台解决方案,满足支付设备行业特有的展示需求。查看源码
  • (PC+WAP)绿色环保建筑设备通用行业pbootcms源码下载通过模块调整可适配园林景观、装配式建筑、绿色装修等生态建设相关领域。预制绿色建材展示、能耗模拟等专业模块,集成项目案例、环保工艺等建筑行业特色内容结构,测试数据包含LEED认证体系查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐