我想用javascript做一个级联select。描述如下。项目用的框架是struts1+hibernate+spring。谢谢！ 10

前一个select选择的是学校的院系，后一个select根据前面选择的院系到数据库中查找该院系下的专业并将该专业显示在select框中。院系和专业都是从数据库出来的。效果... 前一个select选择的是学校的院系，后一个select根据前面选择的院系到数据库中查找该院系下的专业并将该专业显示在select框中。院系和专业都是从数据库出来的。效果图大概就是下面这样的。可以使用jQuery框架或纯js代码。谢谢展开

 我来答

3个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

历盆郁7
2012-05-02 · TA获得超过4277个赞

知道大有可为答主

回答量：1795

采纳率：100%

帮助的人：945万

我也去答题访问个人页

关注

展开全部

给你的小例子吧,为了方便,数据是在js里面定义的.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>级联</TITLE>
</HEAD>
<script type="text/javascript" src="../jquery-1.7.js"></script>
<BODY>
<script type="text/javascript">

// 院系,格式:院系ID + 院系名称
var yuanxi = ['1_信息工程学院','2_外语学院'];

// 专业,格式:专业ID + 专业名称 + 院系ID
var zhuanye = ['1_计算机科学与技术_1','2_自动化_1','3_英语系_2','4_日语系_2','5_法语系_2'];

$(function(){
$('#yuanxiSelect').initSelect().change(function(){$('#zhuanyeSelect').changeSelect();});
$('#zhuanyeSelect').changeSelect();
});

$.fn.initSelect = function(){
for(var i = 0; i < yuanxi.length; i++){
var arr = yuanxi[i].split('_');
$(this).append("<option value='" + arr[0]+ "'>" + arr[1]+ "</options>");
}

return this;
}

$.fn.changeSelect = function(){

$(this).empty();

var yuanxiVal = $('#yuanxiSelect').val();

for(var i = 0; i < zhuanye.length; i++){
var arr = zhuanye[i].split('_');
if(arr[2] == yuanxiVal){
$(this).append("<option value='" + arr[0]+ "'>" + arr[1]+ "</options>");
}
}

return this;
}
</script>

院系:<select id="yuanxiSelect" ></select>
专业:<select id="zhuanyeSelect" ></select>
</BODY>
</HTML>

追问

您好！感谢你的关注！您给的例子很好，我看懂了。但是如果数据来源于数据库，比如在我的Action方法里有一语句request.setAttribute("yuanxi",yuanxiList);将从数据库中获取的院系列表yuanxiList放置在request中，请问在jsp页面的javascript中怎么访问这些数据呢？

追答

有两种以上实现方式,下面只举两个例子.这东西等你熟练了,可以按照自己的想法去做,

1,动态利用ajax获取"专业"列表数据
2.在action中手动拼写javascript脚本.查出所有的"院系","专业"数据,拼接成符合特定格式的数据(格式可参考我给的)
  部分代码如下:
  StringBuffer buf = new StringBuffer();
  buf.append('');
 buf.append("var yuanxi = ['1_信息工程学院','2_外语学院'];")
.....
request.setAttribute("script",buf.toString());

jsp页面上:
${script},生成的源代码,就如我上面的例子了.

已赞过 已踩过<

评论收起

阳光天使54321
2012-05-02

知道答主

回答量：5

采纳率：0%

帮助的人：2.5万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">

</script>
</head>
<BODY onload='init();'>
<form id="user_reg" name="user_reg" method="post" action="">
<input name="address" type="text" value=""/>
<select name="sheng" onchange="select()">
</select>
<select name="shi" onChange="select()"></select>
</form>
</body>

已赞过 已踩过<

评论收起

jiajiaxinyi521
2012-05-03

知道答主

回答量：14

采纳率：0%

帮助的人：5.1万

我也去答题访问个人页

关注

展开全部

用ajax可以实现，效果更好一下

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

我想用javascript做一个级联select。描述如下。项目用的框架是struts1+hibernate+spring。谢谢！ 10

其他类似问题

为你推荐：