jsp做select下拉列表二级联动的，第一个select显示数据库里的字段名称，第二个显示对应字段的数据

Posted 2023-05-03

主要就是做数据库查询的j，sp做select下拉列表二级联动的第一个select显示数据库里一个表的字段名称，第二个下拉列表存放选中的第一个下拉列表字段下的数据，然后再查询~~~~求怎么实现这样的效果？最好就是jsp+js做的~~~求大神来解答！
这么水~~~都几天了 居然没人会这样的！！！哎

参考技术A JSP（njpb:paginationForm类似form，我这里用的框架里的组件）：
<njpb:paginationForm pager="$pager " action="$contextPath /oee_timecollect_timeCollect!findBeanList.action?tid=$tid" onsubmit="return navTabSearch(this);">
<table class="searchContent">
<tr>
<td>事业部:</td>
<td>
<input id="parentId" type="text" value="$queryParameter['eqmanager.organization.parent.id']" hidden="true">
<select class="select" id="parent" name="_query.eqmanager.organization.parent.id" onchange="getorganization()">
<option value="">请选择</option>
</select>
</td>
<td>镀膜巴:</td>
<td>
<input id="childId" type="text" value="$queryParameter['eqmanager.organization.id']" hidden="true">
<select class="select" id="child" name="_query.eqmanager.organization.id">
<option value="">请选择</option>
</select>
</td>
<td><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></td>
</tr>
</table>
</njpb:paginationForm>
script：
<script type="text/javascript">
/*加载事业部下拉选项*/
$(function ()
var parentId = $('#parentId').val();
$.ajax(
type : "POST",
url : "$contextPath /security_organization!findOrganization.action?tid=$tid&bean.parent.id=1",
success: function (data)
var dataStr = data.message;
if (dataStr != null && dataStr != "")
var vList = dataStr.split("@");
if (vList != null && vList.length > 0)
for (var i = 0; i < vList.length; i ++)
var str = vList[i].split("&");
if(parentId == str[0])
$('#parent').append("<option value='" + str[0] + "' selected='true'>" + str[1] + "</option>");
getorganization();
else
$('#parent').append("<option value='" + str[0] + "'>" + str[1] + "</option>");




,
dataType : "json",
error: function ()
alert("加载事业部失败");

);
);
/*加载镀膜巴下拉选项*/
function getorganization()
var parent = $("#parent").val();
$("#child").empty();
var childId = $('#childId').val();
$.ajax(
type: "post",
url: "$contextPath /security_organization!findOrganization.action?tid=$tid&bean.parent.id="+parent,
success: function (data)
$('#child').append("<option value='' selected='selected' >" + '请选择' + "</option>");
var dataStr = data.message;
if(dataStr != null && dataStr != "")
var vList = dataStr.split("@");
if (vList != null && vList.length > 0)
for (var i = 0; i < vList.length; i ++)
var str = vList[i].split("&");
if(childId == str[0])
$('#child').append("<option value='" + str[0] + "' selected='true'>" + str[1] + "</option>");
else
$('#child').append("<option value='" + str[0] + "' >" + str[1] + "</option>");




,
dataType : "json",
error: function ()
alert("加载镀膜巴失败");

);

</script>

二级联动asp下拉式列表菜单

big表结构
ID(自动) bigclassName
内容，如：
1 北京
2 上海

small表结构
ID(自动) bigclassname smallclassname
1 北京 中关村地区
2 北京 国贸商圈
3 上海 黄埔
意思是big表为大类，small表为小类,big表的bigclassName与small表的smallclassname表是一对多的关系。
问题：我想做二级联动的下拉式列表菜单，选大类后，另一菜单为该大类下所有子类，得到二级联动列表菜单的值，采用调用数据库的形式，该怎么写呀？？

总体要求是这样的吧：选择big的下拉菜单后，从数据库获得所选择大项内的二级选项，更新到二级下拉菜单中
一级菜单没得说，直接数据库读取
二级菜单就可以用两种方法实现，
1、先预读出所有二级选项及对应一级选项的classname，待选择一级菜单后利用js更换二级菜单的选项
2、选择一级菜单后，再从数据库读取二级菜单选项，更新到二级菜单，可以隐含一个页面作为刷新，这种办法比较繁琐些
<script language=javascript>
//最先从数据库读取所有选项值
//allSel数组形如：((北京，中关村，国贸，天安门，....),(上海，黄埔，....).....)
//(北京，中关村，国贸，天安门，....)---->第一个为一级选项，后面为二级选项
var allSel=new Array();//储存所有一级、二级选项，定义成全局变量
var tmpSel=new Array();//临时选项 allSel.add(tmpSel) allSel 是数组的数组，即二维数组
<%
dim bNew
rs.open "select * from big,small where big.bigclassName=small.bigclassname order by big.bigclassname",1,3,conn
bNew=rs("big.bigclassname")
response.write "tmpSel=new Array();"
response.write "tmpSel.add('" & rs("big.bigclassname") & "');"
do while not rs.eof
if bNew<>rs("big.bigclassname") then '新城市
response.write "allSel.add(tmpSel);"
response.write "tmpSel=new Array();"
response.write "tmpSel.add(" & rs("big.bigclassname") & ")"
end if
rsponse.write "tmpSel.add('" & rs("small.smallclassname") & "');" ‘加入二级菜单
rs.movenext
loop
rs.close
%>
</script>
一级菜单：<select id=bigsel onchange=sel_chg(this)>
<%
rs.open "select * from big",conn,1,3
do while not rs.eof
response.write "<option value=" & rs("id") & ">" & rs("bigclassname") & "</option>"
rs.movenext
loop
rs.close
%>
</select>
二级菜单<select id=ssel><option value=-1>请选择...</option></select>
js实现更新二级菜单
<script language=javascript>
function chgOption(op_arr) //根据参数修改下拉菜单选项
var vOptions,iii;
var obj=document.all.ssel; //二级菜单obj
for(iii=0;iii<obj.length-1;iii++)obj.options.remove(0);//移除原二级菜单选项
for(iii=1;iii<op_arr.length;i++) //iii=1
vOptions=document.createElement("option");
vOptions.value=iii;
vOptions.text=op_arr[iii];
obj.options.add(vOptions);


function sel_chg(obj) //一级菜单选择后发起替换二级菜单
//获知是哪个选项被选中
var selIdx=obj.selectedIndex;
//根据之前的allSel替换二级菜单
chgOption(allSel[selIdx]);//注意这里调用allSel[selIdx]

</script> 参考技术A 这里有一个多级联动select菜单
你直接套进去就行了
里面有源码

参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?2=j&id=11685