如何以最高效率、最减轻数据库及网络负担实现form中两个相关联的select.即选中第一个select ，网页自动从数据库中查询出与之对应的选项，并刷新另一个select 中option ,供用户继续选择。
10 个解决方案
#1
数量不是很大的时候在载入的时候一次读入,然后用javascript做多级连动就可以了,
我这里给你贴一个简单的,你可以看着修改一下用.
<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>
我这里给你贴一个简单的,你可以看着修改一下用.
<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>
#2
1.多次提交onchange="window.location='SelfURL?Category=CategoryValue';"
2.建立<input id="CategoryList" type=hidden value="<%=将记录集循环后的值用分隔符隔开成串%>">用JavaScript的split处理CategoryList的值返回数组来填充列表框.
2.建立<input id="CategoryList" type=hidden value="<%=将记录集循环后的值用分隔符隔开成串%>">用JavaScript的split处理CategoryList的值返回数组来填充列表框.
#3
和我的问题一样.这个我也不会.请大家帮助,能不能在详细一点.最好给一个完整的例子.谢谢大家了..谢谢了..
#4
<select name="sl" onChange="document.h_chg.location='hid_frame.jsp?sl='+this.options[this.selectedIndex].value">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select name="yourneeded"><option>请选择</option>
</select>
<form name="hidden_frm" action="hid_frame.jsp">
<input type="hidden" name="a">
</form>
<iframe name="hid_frame.jsp" src="h_chg.jsp" width="0" height="0"></iframe>
==================================
hid_frame.jsp
===========================================
<% String a = request.getParameter("sl") ;
//根据a参数做查询条件，返回给options
%>
<script language="javascript">
parent.yourneeded.innerHTML="<select name="yourneeded"><%=options%></option></select>";
</script>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select name="yourneeded"><option>请选择</option>
</select>
<form name="hidden_frm" action="hid_frame.jsp">
<input type="hidden" name="a">
</form>
<iframe name="hid_frame.jsp" src="h_chg.jsp" width="0" height="0"></iframe>
==================================
hid_frame.jsp
===========================================
<% String a = request.getParameter("sl") ;
//根据a参数做查询条件，返回给options
%>
<script language="javascript">
parent.yourneeded.innerHTML="<select name="yourneeded"><%=options%></option></select>";
</script>
#5
这个问题我也不会
留个记号，看看高手的
留个记号，看看高手的
#6
谢谢各位高手的回复。关键是如何以最高效率、最减轻数据库及网络负担的方式实现！
#7
1。先确定数据库中对应表的记录是不是很多，如果才几十条的话，可以在页面第一次请求时，就把所有的需要的数据项都读取出来，保存在页面中，靠JavaScript在前端做两个Seclect的互动，这样网络交互是最少的，用户感受最好，只是第一次页面显示的时候稍微慢一点。
2。如果后台数据量很大，第一次就把所有数据都缓存在页面中，初次请求时，页面显示会很慢，特别是上千条数据的话，根本就不要考虑第一种方案了。这时，初次显示页面时，不用连接数据库，显示速度会很快，然后通过在第一个Seclect中的onChange事件中触发一次form提交，后台再根据选择的条件连接数据库，构造第二个Select的内容，这样相当于一次页面的刷新，肯定会有一定的停滞感，用户感受不好，所以如果数据量在几百条以内的话，就用第一种最好。
2。如果后台数据量很大，第一次就把所有数据都缓存在页面中，初次请求时，页面显示会很慢，特别是上千条数据的话，根本就不要考虑第一种方案了。这时，初次显示页面时，不用连接数据库，显示速度会很快，然后通过在第一个Seclect中的onChange事件中触发一次form提交，后台再根据选择的条件连接数据库，构造第二个Select的内容，这样相当于一次页面的刷新，肯定会有一定的停滞感，用户感受不好，所以如果数据量在几百条以内的话，就用第一种最好。
#8
建议把记录一次都取道页面中的javascript数组变量里，这样处理很好，也就是上面小鱼儿说的第一个方法，他说的第二个方法一般不会存在，可以这么说两个select互动不可能会有万八千条记录，那样也能用select互动选择了，还有，几千条记录网络速度绝对不慢，放心使用。如果你只是做两个select的互动选择，你就用第一个方法吧，反复提交表单选择的方法不要考虑
#9
zwxu(zwxu) 如果你做一些中大型项目，这些问题是经常存在的。。，一个集团公司要做一些管理的话它一个子公司 部门最少过千。 还有类似的会计科目，库存之类的。都是有很多的。。。第二种方法还是蛮有用的。：）
#10
学习：）
#1
数量不是很大的时候在载入的时候一次读入,然后用javascript做多级连动就可以了,
我这里给你贴一个简单的,你可以看着修改一下用.
<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>
我这里给你贴一个简单的,你可以看着修改一下用.
<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>
#2
1.多次提交onchange="window.location='SelfURL?Category=CategoryValue';"
2.建立<input id="CategoryList" type=hidden value="<%=将记录集循环后的值用分隔符隔开成串%>">用JavaScript的split处理CategoryList的值返回数组来填充列表框.
2.建立<input id="CategoryList" type=hidden value="<%=将记录集循环后的值用分隔符隔开成串%>">用JavaScript的split处理CategoryList的值返回数组来填充列表框.
#3
和我的问题一样.这个我也不会.请大家帮助,能不能在详细一点.最好给一个完整的例子.谢谢大家了..谢谢了..
#4
<select name="sl" onChange="document.h_chg.location='hid_frame.jsp?sl='+this.options[this.selectedIndex].value">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select name="yourneeded"><option>请选择</option>
</select>
<form name="hidden_frm" action="hid_frame.jsp">
<input type="hidden" name="a">
</form>
<iframe name="hid_frame.jsp" src="h_chg.jsp" width="0" height="0"></iframe>
==================================
hid_frame.jsp
===========================================
<% String a = request.getParameter("sl") ;
//根据a参数做查询条件，返回给options
%>
<script language="javascript">
parent.yourneeded.innerHTML="<select name="yourneeded"><%=options%></option></select>";
</script>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select name="yourneeded"><option>请选择</option>
</select>
<form name="hidden_frm" action="hid_frame.jsp">
<input type="hidden" name="a">
</form>
<iframe name="hid_frame.jsp" src="h_chg.jsp" width="0" height="0"></iframe>
==================================
hid_frame.jsp
===========================================
<% String a = request.getParameter("sl") ;
//根据a参数做查询条件，返回给options
%>
<script language="javascript">
parent.yourneeded.innerHTML="<select name="yourneeded"><%=options%></option></select>";
</script>
#5
这个问题我也不会
留个记号，看看高手的
留个记号，看看高手的
#6
谢谢各位高手的回复。关键是如何以最高效率、最减轻数据库及网络负担的方式实现！
#7
1。先确定数据库中对应表的记录是不是很多，如果才几十条的话，可以在页面第一次请求时，就把所有的需要的数据项都读取出来，保存在页面中，靠JavaScript在前端做两个Seclect的互动，这样网络交互是最少的，用户感受最好，只是第一次页面显示的时候稍微慢一点。
2。如果后台数据量很大，第一次就把所有数据都缓存在页面中，初次请求时，页面显示会很慢，特别是上千条数据的话，根本就不要考虑第一种方案了。这时，初次显示页面时，不用连接数据库，显示速度会很快，然后通过在第一个Seclect中的onChange事件中触发一次form提交，后台再根据选择的条件连接数据库，构造第二个Select的内容，这样相当于一次页面的刷新，肯定会有一定的停滞感，用户感受不好，所以如果数据量在几百条以内的话，就用第一种最好。
2。如果后台数据量很大，第一次就把所有数据都缓存在页面中，初次请求时，页面显示会很慢，特别是上千条数据的话，根本就不要考虑第一种方案了。这时，初次显示页面时，不用连接数据库，显示速度会很快，然后通过在第一个Seclect中的onChange事件中触发一次form提交，后台再根据选择的条件连接数据库，构造第二个Select的内容，这样相当于一次页面的刷新，肯定会有一定的停滞感，用户感受不好，所以如果数据量在几百条以内的话，就用第一种最好。
#8
建议把记录一次都取道页面中的javascript数组变量里，这样处理很好，也就是上面小鱼儿说的第一个方法，他说的第二个方法一般不会存在，可以这么说两个select互动不可能会有万八千条记录，那样也能用select互动选择了，还有，几千条记录网络速度绝对不慢，放心使用。如果你只是做两个select的互动选择，你就用第一个方法吧，反复提交表单选择的方法不要考虑
#9
zwxu(zwxu) 如果你做一些中大型项目，这些问题是经常存在的。。，一个集团公司要做一些管理的话它一个子公司 部门最少过千。 还有类似的会计科目，库存之类的。都是有很多的。。。第二种方法还是蛮有用的。：）
#10
学习：）