Web页中级联下拉选择框问题的解决方法

转载 2006年06月15日 11:18:00
原文地址:http://bjzhanghao.cnblogs.com/archive/2005/08/25/64006.html#222832
原文附件下载地址:http://www.cnblogs.com/Files/bjzhanghao/xselect.zip

示范中心项目里有一些页面要求几个下拉选择框的内容是具有关联的关系的,例如在编辑一个实验项目时,要先在一个下拉框里选择该项目所在的示范中心,这时实验室下拉框里的内容要根据用户选中的示范中心改变。为了实现这个目的,我们先后想了几种方法。

1、在用户选择示范中心时,刷新页面,并把示范中心代码加在url的后面传给action。这样的最大问题是,如果用户已经填写了一部分表单,在更改示范中心选择的时候会丢失已填写的信息。除非在刷新时把整个表单的所有域都加在url里传回,但这样做要在jsp页面里增加非常多的逻辑,因此不能使用。

2、把与示范中心关联的几个下拉框作为iframe的方式,当选择了一个示范中心时,根据所选的示范中心重新load这个iframe,这样不会影响到其他可能已经填写的域。这样做的问题是,iframe对应的页面里要重复考虑权限问题,这是不能忍受的,同时和所有使用框架技术的应用一样,有可能造成一些页面不一致的情形。

3、前面两种方式虽然都被否决了,但它们共同的好处是在用户改变对示范中心的选择时,数据是动态加载的。第三种方式是把所有数据一次读到客户端,使用javascript的方法实现关联。我在网上找到了一些js代码,但大部分都不适合动态生成数据,这也是一开始没有使用js方式的原因之一。不过最后还是找到了一个我认为不错的js,对它进行少量修改后比较漂亮的完成了任务,下面就说说具体的方法。

这个js的演示和下载地址在http://fason.nease.net/samples/select/,这里我要感谢这位fason朋友提供这么好的工具。在需要关联的页面里,例如编辑实验项目的页面,首先要引入xselect.js这个script,然后构造一个Dsy对象,使用这个对象的add方法增加关联下拉框的各个选项。还有两个数组,sel是关联下拉框的id数组,def是这些下拉框缺省的选项值数组。最后使用attachSelect函数将dsy对象和这两个数组关联起来就大功告成。对于选项是动态生成的情况,就是要动态生成这么一段javascript,如下所示:

<script language="JavaScript" src="../xselect.js"></script>
<script language="JavaScript">
<!--
var dsy = new Dsy();
var sel = ["demoCenter","lab"];
var def = ['<bean:write name="projectForm" property="demoCenterCode"/>','<bean:write name="projectForm" property="labCode"/>'];

dsy.add(
"0",[['<bean:message key="select.prompt" bundle="root"/>','']
<logic:iterate name="<%=DemoCenter.class.getName()%>" id="dc">
    ,['
<bean:write name="dc" property="name"/>','<bean:write name="dc" property="code"/>']
</logic:iterate>
]);

dsy.add(
"0_0",[['<bean:message key="select.prompt" bundle="root"/>','']]);
<logic:iterate name="<%=DemoCenter.class.getName()%>" id="dc" indexId="index">
    dsy.add('0_
<%=index.intValue()+1%>',[['<bean:message key="select.prompt" bundle="root"/>','']
    
<bean:define id="code" name="dc" property="code" type="String" />
    
<logic:iterate name="<%=Lab.class.getName()%>" id="lab">
        
<logic:equal name="lab" property="demoCenter.code" value="<%=code%>">
            ,['
<bean:write name="lab" property="name"/>','<bean:write name="lab" property="code"/>']
        
</logic:equal>
    
</logic:iterate>
    ]);
</logic:iterate>
attachSelect(dsy,sel,def);
//-->
</script>

生成的静态页面就是下面这样,页面显示后会缺省选择“北京大学数学示范中心”和“软件工程实验室”:

<script language="JavaScript" src="../xselect.js"></script>
<script language="JavaScript">
<!--
var dsy = new Dsy();
var sel = ["demoCenter","lab"];
var def = ['10000001','10000007'];

dsy.add(
"0",[['--------请选择--------','']
    ,['教育部','1000000
0']
    ,['北京大学数学示范中心','
10000001']
    ,['北京师范大学普通话示范中心','
10000002']
    ,['北京邮电大学卫星通信示范中心','
10000003']]);
dsy.add(
"0_0",[['--------请选择--------','']]);
dsy.add('0_1',[['
--------请选择--------','']
        ,['生物实验室','
10000004']
        ,['软件工程实验室','
10000007']
]);
dsy.add('0_2',[['
--------请选择--------','']
        ,['数据挖掘实验室','
10000002']
        ,['微电子实验室','
10000003']
        ,['Web服务实验室','
10000006']
]);
dsy.add('0_3',[['
--------请选择--------','']
        ,['航空航天实验室','
10000001']
        ,['湍流实验室','
10000005']
        ,['互联网实验室','
10000008']
]);
dsy.add('0_4',[['
--------请选择--------','']
]);    
attachSelect(dsy,sel,def);
//-->
</script>

不过这个js有个小问题,就是它的def数组中的每个元素只能是一个字符串,当选择框是可多选的列表框时,就不能实现多个选项的预选择(populate)。为了解决这个问题,我对xselect.js进行了少量的修改,允许def中的每个元素是一个数组。以下是修改后的xselect.js文件中的doChange()函数:

function doChange(v) {
    
var str = "0";
    
for (var i = 0; i < v; i++) { str += ("_" + Sel[i].selectedIndex); };
    
var ss = Sel[v];
    
if (oDsy.Exists(str)) {
        
with (ss) {
            length 
= 0;
            
var ar = oDsy.Items[str], xx = 0;
            
for (var i = 0; i < ar.length; i++) {
                
var ot = ar[i][0], ov = ar[i][1? ar[i][1] : ot;
                
//if (ov == Store[v]) xx = i;
                options[i] = new Option(ot, ov);

                
//Added by zhanghao
                if(Store[v] instanceof Array){
                    
for(var j=0;j<Store[v].length;j++)
                        
if(Store[v][j] == ov)options[i].selected = true;
                }
else{
                    
if(ov == Store[v])options[i].selected = true;
                }
            }
            
//options[xx].selected = true;
            if (++< Sel.length) doChange(v);
        } 
    } 
else {
        
for (var i = v; i<Sel.length; i++) {
            
with (Sel[i]) {
                length 
= 0;
                options[
0= new Option("--""");
                options[
0].selected = true;
            }
        }
    }
}

其中注释掉了两句,并增加了一段对数组元素的处理,目前这个js在示范中心系统里工作良好。为了让jsp页面中的代码进一步减少,我们今后还要把动态生成js的代码写为tag的方式。

Web页中级联下拉选择框问题是一个非常普遍的问题,本贴里介绍的是我认为十分圆满的一个客户端方式的解决方法,用户在使用时不会感到任何不便,而且因为数据权限问题是在action里已经解决的,在对应的jsp页面里所做的任何处理都不需要考虑数据权限了。但在一些数据量特别大的系统里要考虑网络连接速度是否适合将所有数据传到客户端的问题。

Update: 相关代码下载

相关文章推荐

固定宽度下拉列表中option内容显示不全问题解决方法

动态显示,在鼠标点中后显示完整的列表,离开后显示缩略的列表。 公司项目中,很多页面都用到了select组件模拟树状选择框,由于树的层次可能非常多,因此的选择项内容非常长,而超出固...

QoS路由选择_问题与解决方法综述

  • 2010年12月19日 13:43
  • 463KB
  • 下载

StatusBar下拉Notification宽度满屏解决方法

我的是800x600的屏,在Android 的Notifications没有达到满屏幕宽度 原以为就是xml布局文件的问题,直接找到确定其布局的文件status_bar_expanded.xml...

iscroll.js的上拉下拉刷新时无法回弹的解决方法

使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回。很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接...

MapReduce-Join中级优化-hadoop自带datajoin的解决方法

接着上一篇《》这一篇博客继续说明MapReduce对于Join的操作,这里使用hadoop包中自带的datajoin包来处理,如果是hadoop1.x则包在${HADOOP_HOME}/contrib...
  • doegoo
  • doegoo
  • 2016年01月29日 14:41
  • 799

使用Apache Axis部署 Web服务时的常见问题及其解决方法

本文详细介绍了在Linux环境下以Apache Axis+ Resin作为Web服务平台部署Web服务时的常见问题及解决方法。衷心希望本文对Web服务的开发人员或对Web服务感兴趣的读者能起到一定的帮...
  • dos_186
  • dos_186
  • 2015年08月26日 10:51
  • 372

web项目中的跨域问题解决方法

一种是JSONP 一种是 CORS。在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持。JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多的浏...
  • Amen_Wu
  • Amen_Wu
  • 2017年05月05日 15:17
  • 631

web 前台ie不兼容出现的问题及解决方法

DIV+CSS相对IE6、IE7和IE8的兼容问题     CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性...

安装VS2003出现问题——Microsoft FrontPage 2000 Web 扩展客户端安装不成功 及其解决方法

更多请关注:http://velep.com/ 前言: 之前在公司安装VS2003的时候,没有出现过问题,很顺利,但在家安装时出现过问题,当时不记得怎么解决的。 今天在自己笔记本上再次安装VS2...
  • reille
  • reille
  • 2011年05月08日 16:01
  • 15647

关于jdk版本问题导致的eclipse导入web项目出错解决方法

好几次遇到这样的状况:先前编写好的项目,换台电脑导入项目结果出现一个大大的感叹号。我是直接将原来写好的项目整个打包,然后在解压缩后,用eclipse将已存在的项目导入工作区间。 项目中出现红叉的地...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web页中级联下拉选择框问题的解决方法
举报原因:
原因补充:

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