js二级联动下拉列表,选择左边下拉框，子下拉列表出现或者隐藏。
初始状态
选择一项以后，如果选择ALL，右侧将不显示。
看代码吧！很简单，没有注释。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> js二级联动下拉列表 </TITLE>
<META NAME="Author" CONTENT="Lee,pochonlee">
<META NAME="Keywords" CONTENT="js">
<META NAME="Description" CONTENT="js二级联动下拉列表">
<script language="javascript">
//处理onchange事件的函数
function changeValue(selectValue)
{
if (selectValue == "ALL")
{
document.getElementById('sdiv').style.display = "none";
return;
}
else
{
document.getElementById('sdiv').style.display = "";
document.getElementById('sspan').innerHTML = generateSelect(selectValue);
}
}
//根据第一个列表生成第二个列表(测试，只是随意数据)
function generateSelect(inValue)
{
var select = "<select name='subselect'>";
var option = "";
if (inValue == "1")
{
for (i=0;i<10 ;i++ )
{
option += "<option value="+inValue+">"+inValue+"</option>";
}
} else {
for (i=0;i<10 ;i++ )
{
option += "<option value="+i+">"+i+"</option>";
}
}
return select+option+"</select>";
}
</script>
</HEAD>
<BODY>
<form name="form">
<table>
<tr>
<td>
<select name="select" onchange="return changeValue(this.options[this.selectedIndex].value);">
<option value="ALL">---ALL---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
<td>
<div id="sdiv" style="display:none">
<span id="sspan"></span>
</div>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> js二级联动下拉列表 </TITLE>
<META NAME="Author" CONTENT="Lee,pochonlee">
<META NAME="Keywords" CONTENT="js">
<META NAME="Description" CONTENT="js二级联动下拉列表">
<script language="javascript">
//处理onchange事件的函数
function changeValue(selectValue)
{
if (selectValue == "ALL")
{
document.getElementById('sdiv').style.display = "none";
return;
}
else
{
document.getElementById('sdiv').style.display = "";
document.getElementById('sspan').innerHTML = generateSelect(selectValue);
}
}
//根据第一个列表生成第二个列表(测试，只是随意数据)
function generateSelect(inValue)
{
var select = "<select name='subselect'>";
var option = "";
if (inValue == "1")
{
for (i=0;i<10 ;i++ )
{
option += "<option value="+inValue+">"+inValue+"</option>";
}
} else {
for (i=0;i<10 ;i++ )
{
option += "<option value="+i+">"+i+"</option>";
}
}
return select+option+"</select>";
}
</script>
</HEAD>
<BODY>
<form name="form">
<table>
<tr>
<td>
<select name="select" onchange="return changeValue(this.options[this.selectedIndex].value);">
<option value="ALL">---ALL---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
<td>
<div id="sdiv" style="display:none">
<span id="sspan"></span>
</div>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>