Struts高手探讨:Struts下拉框联动问题（从数据库中取）

haiquan81 2006-01-24 01:38:57

在google,csdn上搜了一下关于从数据库中取数据的下拉框联动(非Struts实现)的解决方法，有两种思路:
一，在选择第一个下拉框时，触发js方法onchange()，然后提交到服务器，根据第一下拉框值从数据库中取第二个下拉框并返回。
二，一次性从数据库中把数据全部取到js数组中，当第一个下拉框值变动时，触发js方法onchange()改变第二个下拉框架的数组值。
这两种思路我个人觉得应该采用第二种思路，优点是减少与服务端的交互并且有更快的响应速度。我实现第二种方案，具体实现：第一个下拉框的值放在一个Collection中，第二个下拉框放在一个HashMap中，HashMap的key为与第一个下拉框关联的值，value为对应的Collection。不过在实现时，觉得js与Struts标签很难交互，不知大家有什么好的思路。

...全文

517 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

grapepaul 2006-01-26

打赏
举报

...

hooligan000112003 2006-01-26

打赏
举报

我觉得：读数据库太慢了，还是写个JS，把数据库的数据写在数组里比较好
如果有10000条记录，分大类，中类，小类，读数据库太慢了。。。

饿鱼骨头 2006-01-25

打赏
举报

呵，我们做过一项目也用到了两个下拉列表的连动。
当时我实现得和野蛮人兄的差不多

先做了一个静态页面模板实现联动

用一个一维Array存放父下拉列表内容，一个二维Array存放子下拉列表内容。

function setOptions(level)实现两个列表的联动(这就考验js基本功了)，此函数在页面加载时载入：
<body onload="javascript:RelativeSelects=new Array(document.all.A, document.all.B);setOptions(0)">

然后改成动态的只要做如下处理：
用jsp标签或struts标签，根据数据库数据，动态地将两个Array打出，因为页面是先加载jsp再运行js，所以用标签打出来的Array可以被js正常解析。

附:js的静态源码（）：
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<script type="text/javascript">

//array0 & array1 could be output by jsp-tag or struts-tag
var array0 = new Array('p_array_0', 'p_array_1', 'p_array_2', 'p_array_3');
var array1 = new Array(
new Array('c_array_0_0', 'c_array_0_1'),
new Array('c_array_1_0', 'c_array_1_1'),
new Array('c_array_2_0', 'c_array_2_1', 'c_array_2_2', 'c_array_2_3', 'c_array_2_4'),
new Array('c_array_3_0')
);

var RelativeSelects;

function setOptions(level) {
var XPath;

var objCurrentSelect = RelativeSelects[level];
var objOptions = objCurrentSelect.options;
while (objOptions.length>0) {
objOptions.remove(0);
}

if (level == 0) {
for (i = 0; i < array0.length; i++) {
var optionText = array0[i];
var optionValue = optionText;
var objOption = new Option(optionText, optionValue);
objOptions.add(objOption);
}
} else {
var objParentSelect = RelativeSelects[level - 1];
var selectedIndex = objParentSelect.selectedIndex;
//alert(selectedIndex);
var objArray = array1[selectedIndex];
for (i = 0; i < objArray.length; i++) {
var optionText = objArray[i];
var optionValue = optionText;
var objOption = new Option(optionText, optionValue);
objOptions.add(objOption);
}
}

if (level == 0) {
setOptions(1);
}
}
</script>
<script type="text/javascript">
function doSubmit() {
var objSelect;
objSelect = document.all.A;
var value1 = objSelect.options[objSelect.selectedIndex].text;
objSelect = document.all.B;
var value2 = objSelect.options[objSelect.selectedIndex].text;
alert(value1 + " " + value2);
}
</script>
</head>

<body onload="javascript:RelativeSelects=new Array(document.all.A, document.all.B);setOptions(0)">
<form id="search">
<select name="A" onChange="setOptions(1)">
</select>

<select name="B">
</select>

<input type="button" value="submit" onclick="doSubmit()">
</form>
</body>

</html>

best_threewood 2006-01-25

打赏
举报

学习

mingr6370 2006-01-24

打赏
举报

第一种方法可行的，实现起来不会那么麻烦，就是效率差点
第二中方法对JS要求蛮高的，我就不会啦

yingtju 2006-01-24

打赏
举报

看看这个：
http://providers.sourceforge.net/printversion.html

和你的第二种想法相似

acd123456 2006-01-24

打赏
举报

to: acd123456(低智商野蛮人) <appcom:redata />这个标签是不是要进行数据库连接的吧，这里我提到的第一种思路，方便的话把这个标签实现也贴一下，大家研究研究：）

我用的就是第二种思路
<appcom:redata />是从数据库中动态的把被联动的下拉框选项读出来放到数组里
是先把所有的选项读出来放到数组中
然后选项改变后动态加载被联动的下拉框
标签实现大概入下
StringBuffer sb = new StringBuffer();
sb.append("\n");
sb.append(arryname).append(" = ").append("new Array();\n");
然后循环写入从数据库中读出的记录
{ sb.append(arryname).append("[").append(index++).append("] = new Array('")
.append(povalue).append("','")
.append(sovalue).append("','")
.append(solabel).append("');\n");
{

我也觉得如果选项较少的话bluemoon0001(小天--追梦浪子)的方法比较好
选项多时可以通过加快捷键的方式快速定位

haiquan81 2006-01-24

打赏
举报

to: acd123456(低智商野蛮人) <appcom:redata />这个标签是不是要进行数据库连接的吧，这里我提到的第一种思路，方便的话把这个标签实现也贴一下，大家研究研究：）
to: bluemoon0001(小天--追梦浪子) 这倒是一种新的实现联动思路，值得考虑。

有没有实现第二种思路的，用Struts标签，Collectiion与HashMap输出的实现，期待ing

bluemoon0001 2006-01-24

打赏
举报

用下面这样的下拉框多好啊，每个选项目的值是用大类ID + F + 小类ID，当服务器端收到Var_xmz的值后，再用 F 分隔就行了：
<select name="Var_xmz">
<option value="">---请选择项目组---</option>
<option value='01F00' >并购类</option>
<option value='02F00' >文化产业类</option>
<option value='02F08' > ├文化基础设施</option>
<option value='02F09' > ├广播影视、出版发行业</option>
<option value='02F10' > ├文化旅游业</option>
<option value='02F11' > ├网络文化、会展业</option>
<option value='02F12' > ├演艺及文化休闲娱乐业</option>
<option value='02F13' > ├文化用品开发</option>
<option value='03F00' >旅游类</option>
<option value='03F14' > ├景点基础设施</option>
<option value='03F15' > ├度假区</option>
</select>

我以前也用连动，后来觉得连动写着麻烦，而且，当用户提交不成功，返回后，第二个下拉列表框中的值就没有了，我们会用的，知道重选一下，可是对于有些用户，跟本就不知道如何操作了，所以现在我就不用连动了，改用上面那种方式了。

acd123456 2006-01-24

打赏
举报

那就不要用struts的下拉标签
用标准标签
js如下：
//完成机关和部门联动的js
function relatedchange(eventsource,relatedselectname)
{
//输出联动关系数组
<appcom:redata />
//联动更新
var select = document.all(relatedselectname);
var value =eventsource.value;
select.options.length=0;
var len = taxdeptcode.length;
var a=0;
for (i=0;i < len; i++)
{ if (deptcode[i][0] == value )
{
document.all(relatedselectname).options[++a] = new Option(deptcode[i][2], deptcode[i][1]);
}
}
}
eventsource是一个下拉框，relatedselectname是eventsource选择后需要动态加载的下拉框的名字
<appcom:redata />这个自定义标签生成被动下拉框的选项，放到deptcode数组中,deptcode[i][0]存机关名称。deptcode[i][1]，deptcode[i][2]分别存选项名和选项值