多级关联下拉选择框的高效实现(想用“最优”的,还是不敢)

原创 2002年05月24日 12:33:00

偶然看见一篇《现利用xml数据岛实现多级关联下拉选择框的做法

思路居然和我前几天做的不谋而合。但是我觉得我的方法更简单,不需要调用XML Dom。数据下载量也要小一些。

当时做就是考虑到选项会很多,定义关联关系的数据结构要高效,过多的下载量会使用户反感。

同时,这些定义需要在服务器端动态生成,按目前的定义方法也只要用嵌套的循环输出就非常容易实现。

再有就是通用性,灵活性。和前面提到的大作都类似了。

闲话少说,书归代码:

<BODY>
<SELECT NAME="s1"><option>需要JavaScript才能正确显示</SELECT>
<SELECT NAME="s2"></SELECT>
<SELECT NAME="s3"></SELECT>
<SELECT NAME="s4"></SELECT>

<SCRIPT LANGUAGE="JavaScript">
<!--

 

//选择框的名字
selector = [ "s1", "s2", "s3", "s4" ];

 

//选择项: "名字", "值", 子选择
menu = [
"地球","1",
 [
 "中国","86",
  [
  "北京","BJ",
   [
   "--","1",null
   ],
  "四川","SC",
   [
   "成都","28",null,
   "乐山","",null,
   "攀枝花","",null,
   "自贡","",null,
   "德阳","",null,
   "绵阳","",null
   ]
  ],
 "米国","1",
  [
  "加利福尼亚","CA",
   [
   "旧金山","1",null,
   "洛杉矶","2",null
   ],
  "华盛顿","WA",
   [
   "西雅图","seattle",null
   ]
  ]
 ],
"火星","2",
 [
 "大峡谷","86",
  [
  "小山丘","BJ",
   [
   "A地区","28",null,
   "B地区","",null,
   "C地区","",null
   ]
  ]
 ]
];

 

function wizz(level)
{
 if( level == 0 )
  a = menu;
 else
 {
  str = "menu";
  for( i=0; i<level; i++ )
   str += "[" + (document.all[selector[i]].selectedIndex * 3 + 2)  + "]";
  a = eval(str);
 }
 if( a == null ) return;
 
 s = document.all[selector[level]];
 i = s.length;
 while( i > 0 ) s.options[--i] = null;
 while( i < Math.floor(a.length/3) )
  s.options[i] = Option( a[i*3], a[i++*3+1] );
 s.onchange = Function("wizz(" + (level+1) + ")");
 wizz(level+1);
}

 

wizz(0);

//-->
</SCRIPT>

 

</BODY>
</HTML>

 

我觉得效率还可以了,大家还有什么高招欢迎交流 wizz@21cn.com

多级关联下拉选择框的高效实现

需要JavaScript才能正确显示 //选择框的名字selector = [ "s1", "s2", "s3", "s4" ]; //选择项: "名字", "值", 子选择menu = ["地球",...
  • xiaowu703
  • xiaowu703
  • 2005年04月30日 10:07
  • 1127

Js 实现下拉款选择后多级联动效果

后台js实现: self.StartTimeInfo = ko.observable();         self.EndTimeInfo = ko.observable();        ...
  • Cbh5425
  • Cbh5425
  • 2016年09月07日 17:28
  • 651

多级关联下拉选择框

  • liudave
  • liudave
  • 2010年06月22日 11:09
  • 770

多级关联下拉选择框的做法

var arrSel=["year","month","date","clock"];//arrSel定义了要修改的下拉框和xml数据的节点名称                            ...
  • Beerium
  • Beerium
  • 2004年08月12日 22:40
  • 2185

React-native 下拉弹框选择(根据网上省 市 区插件改写)

/** * Created by gaoay on 2017/2/27. */ import React, { PropTypes } from 'react'; import { Vi...
  • xiaoai_911
  • xiaoai_911
  • 2017年03月15日 18:11
  • 795

bootstrap 下拉选择框select实现从服务器加载option

昨天做了一个下拉菜单中的item从服务器加载,发现用在项目中并不合适,改用下拉选择框 前台代码: 设备分中心 ...
  • mht1829
  • mht1829
  • 2016年07月28日 17:59
  • 9853

css+html+js实现下拉及多级弹出菜单

本文将使用css+html+js实现横向菜单,具有下拉的多级弹出菜单。 首先我们来看看效果图: 首先应该写html部分的代码,代码比较简单,代码如下: ...
  • wj903829182
  • wj903829182
  • 2014年08月23日 08:48
  • 4037

利用xml实现多级关联下拉选择框

var arrSel=["year","month","date","clock"];//arrSel定义了要修改的下拉框和xml数据的节点名称                            ...
  • menjoy
  • menjoy
  • 2006年12月23日 22:52
  • 525

html选择框多级联动

Demo来源:http://www.imuum.com/plugin-jquery-cityselect-js-provinces-linkage-effect.html 我把Demo改写成最多可以到...
  • liufang1991
  • liufang1991
  • 2016年08月17日 19:46
  • 3550

[HTML] CSS + JS 多级下拉菜单

多级下拉菜单 //显示子菜单里的内容 function displaySubMenu(li) { var...
  • shylx123
  • shylx123
  • 2015年08月22日 20:34
  • 3378
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:多级关联下拉选择框的高效实现(想用“最优”的,还是不敢)
举报原因:
原因补充:

(最多只允许输入30个字)