js下拉框联动代码，要实现这样的效果：见内容
3个回答
展开全部
刚写了一个 这是html 你改一下把
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body >
<form name="form" method="post" action="";>
<table border="1"
style="width: 100%; height: 100%; border-collapse: collapse;">
<tr>
<td colspan="2"><span style="font-size: 36pt; color: green">新商品注册</span></td>
</tr>
<tr>
<td width="15%">商品代码：</td>
<td width="85%"><input type="text" name="product_no"></input> <font
color="red">*</font></td>
</tr>
<tr>
<td>商品名称:</td>
<td><input type="text" name="product_name">
</input> <span class="STYLE1"><font color="red">*</font></span> </td>
</tr>
<tr>
<td>一级分类:</td>
<td><select name="oneclass" onchange=Change()>
<option selected="selected" >--请选择--</option>
<option >图书</option>
<option >服装</option>
<option >饮料</option>
<option >电器</option>
</select></td>
</tr>
<tr>
<td>二级分类：</td>
<td><select name="twoclass">
<option selected="selected">--请选择--</option>
</select></td>
</tr>
<tr>
<td>供 应 商:</td>
<td><input type="text" name="support"></input> <font
color="red">*</font></td>
</tr>
<tr>
<td>厂 商:</td>
<td><input type="text" name="company"></input> <font
color="red">*</font></td>
</tr>
<tr>
<td>保质期限:</td>
<td><input type="text" name="date"></input> <font
color="red">*</font></td>
</tr>
<tr>
<td>可否退货:</td>
<td><input type="radio" checked="checked" name="tui" value="yes">是</input> <input type="radio" name="tui" value="no">否</input></td>
</tr>
<tr>
<td>可否换货:</td>
<td><input type="radio" checked="checked" name="huan" value="yes">是</input> <input type="radio" name="huan" value="no">否</input></td>
</tr>
<tr>
<td>商品备注:</td>
<td><textarea name="mess"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="确认注册"></input>
<input type="reset" value="重新填写"/></td>
</tr>
</table>
</form>
</body>
下面这是javascript
//定义一个二维数组two,用于存放二级分类名称。
var two=new Array();
two[0]=new Array();
two[1]=new Array();
two[2]=new Array();
two[3]=new Array();
two[4]=new Array();
//赋值，每个一级分类的二级分类存放于数组的一行。
two[0][0]="--请选择--"
two[1][0]="--请选择--"
two[1][1]="计算机类";
two[1][2]="科学类";
two[1][3]="文学类";
two[1][4]="杂志类";
two[1][5]="法律类";
two[2][0]="--请选择--"
two[2][1]="春装";
two[2][2]="夏装";
two[2][3]="秋装";
two[2][4]="冬装";
two[3][0]="--请选择--"
two[3][1]="碳酸饮料";
two[3][2]="果汁类";
two[3][3]="牛奶";
two[4][0]="--请选择--"
two[4][1]="家用电器";
two[4][2]="商用电器";
function Change()
{var i,Index;
Index=document.form.oneclass.selectedIndex;
iCount=0;
while (two[Index][iCount]!=null) iCount++;//计算选定一级分类的二级分类个数
document.form.twoclass.length=iCount;//改变下拉菜单的选项数
for (i=0;i<=iCount-1;i++)//改变下拉菜单的内容
document.form.twoclass[i]=new Option(two[Index][i]);
document.form.twoclass.focus();
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body >
<form name="form" method="post" action="";>
<table border="1"
style="width: 100%; height: 100%; border-collapse: collapse;">
<tr>
<td colspan="2"><span style="font-size: 36pt; color: green">新商品注册</span></td>
</tr>
<tr>
<td width="15%">商品代码：</td>
<td width="85%"><input type="text" name="product_no"></input> <font
color="red">*</font></td>
</tr>
<tr>
<td>商品名称:</td>
<td><input type="text" name="product_name">
</input> <span class="STYLE1"><font color="red">*</font></span> </td>
</tr>
<tr>
<td>一级分类:</td>
<td><select name="oneclass" onchange=Change()>
<option selected="selected" >--请选择--</option>
<option >图书</option>
<option >服装</option>
<option >饮料</option>
<option >电器</option>
</select></td>
</tr>
<tr>
<td>二级分类：</td>
<td><select name="twoclass">
<option selected="selected">--请选择--</option>
</select></td>
</tr>
<tr>
<td>供 应 商:</td>
<td><input type="text" name="support"></input> <font
color="red">*</font></td>
</tr>
<tr>
<td>厂 商:</td>
<td><input type="text" name="company"></input> <font
color="red">*</font></td>
</tr>
<tr>
<td>保质期限:</td>
<td><input type="text" name="date"></input> <font
color="red">*</font></td>
</tr>
<tr>
<td>可否退货:</td>
<td><input type="radio" checked="checked" name="tui" value="yes">是</input> <input type="radio" name="tui" value="no">否</input></td>
</tr>
<tr>
<td>可否换货:</td>
<td><input type="radio" checked="checked" name="huan" value="yes">是</input> <input type="radio" name="huan" value="no">否</input></td>
</tr>
<tr>
<td>商品备注:</td>
<td><textarea name="mess"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="确认注册"></input>
<input type="reset" value="重新填写"/></td>
</tr>
</table>
</form>
</body>
下面这是javascript
//定义一个二维数组two,用于存放二级分类名称。
var two=new Array();
two[0]=new Array();
two[1]=new Array();
two[2]=new Array();
two[3]=new Array();
two[4]=new Array();
//赋值，每个一级分类的二级分类存放于数组的一行。
two[0][0]="--请选择--"
two[1][0]="--请选择--"
two[1][1]="计算机类";
two[1][2]="科学类";
two[1][3]="文学类";
two[1][4]="杂志类";
two[1][5]="法律类";
two[2][0]="--请选择--"
two[2][1]="春装";
two[2][2]="夏装";
two[2][3]="秋装";
two[2][4]="冬装";
two[3][0]="--请选择--"
two[3][1]="碳酸饮料";
two[3][2]="果汁类";
two[3][3]="牛奶";
two[4][0]="--请选择--"
two[4][1]="家用电器";
two[4][2]="商用电器";
function Change()
{var i,Index;
Index=document.form.oneclass.selectedIndex;
iCount=0;
while (two[Index][iCount]!=null) iCount++;//计算选定一级分类的二级分类个数
document.form.twoclass.length=iCount;//改变下拉菜单的选项数
for (i=0;i<=iCount-1;i++)//改变下拉菜单的内容
document.form.twoclass[i]=new Option(two[Index][i]);
document.form.twoclass.focus();
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
分数有点少，那么就只说一下思路吧。
无非就是在select的onchange里面判断，如果此时列表2里的数据需要显示，则把列表2的visibility设为visible，同时重置其内容，如果不需要显示，则将其可视属性设为hidden。
无非就是在select的onchange里面判断，如果此时列表2里的数据需要显示，则把列表2的visibility设为visible，同时重置其内容，如果不需要显示，则将其可视属性设为hidden。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
简单写了下，估计你应该是这个意思吧！下面是代码....
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function change(){
var index = document.getElementById('s1').selectedIndex;
if(index==2){
document.getElementById('s2').style.display="";
}else{
document.getElementById('s2').style.display="none";
}
}
</script>
</head>
<body>
<table width="400" border="1">
<tr>
<td>一级下拉框</td>
<td>
<select id="s1" style="width:200px" onchange="change()">
<option>--请选择--</option>
<option>无二级下拉框</option>
<option>有二级下拉框</option>
</select>
</td>
</tr>
<tr id="s2" style="display:none">
<td>二级下拉框</td>
<td>
<select id="" style="width:200px">
<option>--请选择--</option>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
</table>
</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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function change(){
var index = document.getElementById('s1').selectedIndex;
if(index==2){
document.getElementById('s2').style.display="";
}else{
document.getElementById('s2').style.display="none";
}
}
</script>
</head>
<body>
<table width="400" border="1">
<tr>
<td>一级下拉框</td>
<td>
<select id="s1" style="width:200px" onchange="change()">
<option>--请选择--</option>
<option>无二级下拉框</option>
<option>有二级下拉框</option>
</select>
</td>
</tr>
<tr id="s2" style="display:none">
<td>二级下拉框</td>
<td>
<select id="" style="width:200px">
<option>--请选择--</option>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
