|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
JAVA学习必须明确这是一项投资,对于大多数的人来说,学习JAVA是为了就业,还有就是刚走向工作位置的朋友想尽快赶上工作的节奏。js|select|静态|下拉|下拉列表经由两天苦战,总算用js+jsp弄定在统一个下拉框中,在不革新页面的情形下,静态天生多级select选项
1、先断定需求及要到达的效果
要到达的效果以下图
[
[img=257style=,283alt=]http://www.alixixi.com/uploadpic/2007-2/200728234121795.jpg[/img]
[img=257style=,283alt=]http://www.alixixi.com/uploadpic/2007-2/200728234121284.jpg[/img]
[img=257style=,283alt=]http://www.alixixi.com/uploadpic/2007-2/200728234122247.jpg[/img]
]
为了便于列位的调试,
我将代码举行了简化,取数据部分我往失落了,列位可修正成本人用的数据
2、申明
现将该计划中,用到的次要技能列鄙人面
1。将数据静态填进js的数组
用以下3句话完成
out.print("<script>");
out.print("selprov[330000]=newArray(newOption(,),newOption(..,goUp),newOption(杭州区域,330100),newOption(宁波区域,330200),newOption(温州区域,330300));");
out.print("</script>");
详细使用时,能够用轮回,将数据不休的out.print(",newOption(xxx,yyy)");增加出来
2.1。中选择了省分后,将区域信息填上天区列表
次要用了上面这个轮回
for(vari=0;i<selprov[hprov.value].length;i++){
harea.add(selprov[hprov.value]);
}
2.2。中选择了区域后,将县市信息填进乡村列表(完成办法同上)
4。用了隐含技能,将3个select放进在统一行中的3个<td></td>中,
然后用<tdstyle="display:none">举行埋没,每次3个<td>中,只要一项是可见的
如:当必要区域显现时,用以下js语句
d2.style.display="";
d1.style.display="none";
d3.style.display="none";
3、源代码
<%@pagecontentType="text/html;charset=GBK"%>
<html>
<head>
<title>city</title>
<scriptlanguage="JavaScript">
varselprov=newArray();
varselarea=newArray();
</script>
<%
out.print("<script>");
//对每一个省的数组增加区域数据
out.print("selprov[330000]=newArray(newOption(,),newOption(..,goUp),newOption(杭州区域,330100),newOption(宁波区域,330200),newOption(温州区域,330300));");
out.print("selprov[350000]=newArray(newOption(,),newOption(..,goUp),newOption(福州区域,350100),newOption(厦门区域,350200),newOption(泉州区域,350300));");
out.print("</script>");
out.print("<script>");
//对每一个省每一个区域的数组增加县市数据
out.print("selarea[330100]=newArray(newOption(,),newOption(..,goUp),newOption(杭州市,330101),newOption(萧山市,330102),newOption(余杭市,330102));");
out.print("selarea[330200]=newArray(newOption(,),newOption(..,goUp),newOption(宁波市,330201),newOption(余姚市,330202),newOption(奉化市,330203));");
out.print("selarea[350100]=newArray(newOption(,),newOption(..,goUp),newOption(福州市,350101),newOption(福清市,350102),newOption(福xx市,350102));");
out.print("</script>");
%>
<script>
</script>
<script>
functionprov_chg()
{
with(document.all){
if(hprov.value){
varln=harea.options.length;
while(ln--){
harea.options[ln]=null;
}
ln=hcity.options.length;
while(ln--){
hcity.options[ln]=null;
}
for(vari=0;i<selprov[hprov.value].length;i++){
harea.add(selprov[hprov.value]);
}
}
}
if(document.form1.hprov.value!="")
{
d2.style.display="";
d1.style.display="none";
d3.style.display="none";
}
else{
}
}
functionarea_chg()
{
if(document.form1.harea.value=="goUp")
{
document.form1.hprov.value="";
d1.style.display="";
d2.style.display="none";
d3.style.display="none";
}elseif(document.form1.harea.value!="")
{
d1.style.display="none";
d2.style.display="none";
d3.style.display="";
}
with(document.all){
if(harea.value){
varln=hcity.options.length;
while(ln--){
hcity.options[ln]=null;
}
for(vari=0;i<selarea[harea.value].length;i++){
hcity.add(selarea[harea.value]);
}
}
}
}
functioncity_chg(){
if(document.form1.hcity.value=="goUp")
{
d1.style.display="none";
d2.style.display="";
d3.style.display="none";
}
}
</script>
</head>
<bodybgcolor="#ffffff">
<formname="form1"method="post"action="./city.jsp">
<table>
<tr></tr>
<tr>
<tdstyle="display:inline"id="d1">省分
<selectid="hprov">
<optionvalue=""></option>
<%
out.print("<optionvalue=330000>浙江省</option>");
out.print("<optionvalue=350000>福建省</option>");
%>
</select></td>
<tdstyle="display:none"id="d2">区域
<selectid="harea">
<optionvalue=""></option>
</select></td>
<tdstyle="display:none"id="d3">县市
<selectid="hcity">
<optionvalue=""></option>
</select></td>
</tr>
</table>
</form>
</body>
</html>
通过视频学习比传统的大课堂学习更适合成人化的学习规律。有人说大课堂气氛好,学习氛围浓,热闹,可以认识很多人。 |
|