在from表单中使用select二级联动菜单？
在from表单中使用select二级联动菜单要javascript的。这是一个示例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>常用的二级联动表单</title>
</head>
<body>
<form id="submit_form_zzjs" name="submit_form_zzjs" method="post" action="">
网站分类
<script language="javascript">
<!--
var subcat=new Array();
var biglist=new Array('电脑网络','休闲娱乐','商业经济');
subcat=new Array('0','音乐mp3','音乐mp3')
subcat=new Array('0','聊天QQ','聊天QQ')
subcat=new Array('0','爱情交友','爱情交友')
subcat=new Array('0','明星美女','明星美女')
subcat=new Array('1','娱乐八卦','娱乐八卦')
subcat=new Array('1','星相命理','星相命理')
subcat=new Array('1','游戏网游','游戏网游')
subcat=new Array('1','动漫卡通','动漫卡通')
subcat=new Array('2','壁纸图片','站长js特效')
subcat=new Array('2','影视宽带','影视宽带')
subcat=new Array('2','WAP网站','WAP网站')
subcat=new Array('2','新闻媒体','新闻媒体')
subcat=new Array('2','电视广播','电视广播')
function changeselect_zzjs_net(locationid)
{
for(j=0;j<biglist.length;j++)
if(biglist==locationid){
locationid=j;
}
document.submit_form_zzjs.smallclass_zzjs_net.length=0;//初始化下拉列表，清空下拉数据
document.submit_form_zzjs.smallclass_zzjs_net.options=new Option('所有小类','所有小类');//给第一个值
for(i=0;i<subcat.length;i++)
{
if(subcat==locationid)
{
document.submit_form_zzjs.smallclass_zzjs_net.options=new Option(subcat,subcat);}//建立option
}
}
//-->
</script>
<select name="bigclass">
<option value="所有大类" selected>所有大类</option>
<option value="电脑网络">电脑网络</option>
<option value="休闲娱乐">休闲娱乐</option>
<option value="商业经济">商业经济</option>
</select>
<select name="smallclass_zzjs_net">
<option value="所有小类" selected>所有小类</OPTION>
</select>
</form>
</body>
</html>
另一个实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>在from表单中使用select二级联动菜单</title>
<style type="text/css">
<!--
.STYLE3 {font-size: 24px}
-->
</style>
<script language="javascript">
function changeCalss()
{
var term =document.myform.selTerm.value;
var newOption1,newOption2;
switch(term){
case "分类一":
newOption1=new Option("一1","一1");
newOption2=new Option("一2","一2");
break;
case "分类二":
newOption1=new Option("二1","二1");
newOption2=new Option("二2","二2");
break;
case "分类三":
newOption1=new Option("三1","三1");
newOption2=new Option("三2","三2");
break;
}
document.myform.selCalss.options.length=0;
document.myform.selCalss.options.add(newOption1);
document.myform.selCalss.options.add(newOption2);
}
</script>
</head>
<body>
<form action="" method="post" name="myform" id="myform">
<table width="260" border="1" align="center" cellspacing="0">
<tr>
<th colspan="2" scope="col"><span class="STYLE3">二级联动菜单示例</span></th>
</tr>
<tr>
<th width="39" scope="row"> 一级</th>
<td width="211"><label>
<select name="selTerm" id="selTerm">
<option value="--一级分类--">--一级分类--</option>
<option value="分类一">分类一</option>
<option value="分类二" selected>分类二</option>
<option value="分类三">分类三</option>
</select>
</label></td>
</tr>
<tr>
<th scope="row">二级</th>
<td><label>
<select name="selCalss" id="selCalss">
<option>--请选择对应分类子类--</option>
</select>
</label></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单元素（select下拉列表）制作二级联动菜单和网站导航</title>
<script language="javascript">
//下面函数是联动菜单的处理代码
function makeshi(x){
var form2=document.diqu.one.options.length;//这句解释同上
var diqul=new Array(form2)//新建一个数组，项数为第一个下拉列表的项数
for(i=0;i<form2;i++)//循环第一个下拉列表的项数那么多次
diqul=new Array();//子循环
//下面是给每个循环赋值
diqul=new Option("绵阳","绵阳");
diqul=new Option("成都","成都");
diqul=new Option("广元","广元");
diqul=new Option("南京","南京");
diqul=new Option("苏州","苏州");
diqul=new Option("常州","常州");
diqul=new Option("南宁","南宁");
diqul=new Option("柳州","柳州");
diqul=new Option("北海","北海");
diqul=new Option("杭州","杭州");
diqul=new Option("温州","温州");
diqul=new Option("义乌","义乌");
var shi=document.diqu.shi;//方便引用
for(m=shi.options.length-1;m>0;m--)
//这个要看清楚,因为要重新填充下拉列表的话必须先清除里面原有的项,清除和增加当然是有区别的了,所以用递减
shi.options=null;//将该项设置为空,也就等于清除了
for(j=0;j<diqul.length;j++){//这个循环是填充下拉列表
shi.options=new Option(diqul.text,diqul.value)
//注意上面这据,列表的当前项等于 新项(数组对象的x,j项的文本为文本，)
}
shi.options.selected=true;//设置被选中的初始值
}
</script>
</head>
<body>
<p>对于脚本来说，最复杂的表单元素对象就是select了，他是一个复合对象，包含OPTION对象数组的对象</p>
<p><strong>演示：地区二级无刷新联动菜单</strong>（其实这个例题也适用了关联数组，只是说被关联的数组是在一级数组的内部，如果有不明白，就看下 <a href="http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.html">http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.html</a> 这篇，专门介绍数组的文字）</p>
<form id="form2" name="diqu" method="post" action="">
<select name="one" size="1">
<option value="0">四川</option>
<option value="1">江苏</option>
<option value="2">广西</option>
<option value="3">浙江</option>
</select>
<select name="shi">
<option value="绵阳">绵阳</option>
<option value="成都">成都</option>
<option value="德阳">德阳</option>
<option value="广元">广元</option>
<option value="南充">南充</option>
</select>
</form>
</body>
</html>
页:
[1]