<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试联动</title>
<script src="Script/jquery-1.8.2.js"></script>
<script src="Script/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#mainList").find("select").eq(0).show();
$("#main").change(function () {
var ss = $('#main')[0].selectedIndex;
$("#mainList").find("select").each(function (i) {
if (i == ss) {
$("#mainList").find("select").eq(i).show();
} else {
$("#mainList").find("select").eq(i).hide();
}
});
});
});
</script>
</head>
<body>
<select id="main">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<div id="mainList">
<select style="display: none;">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<select style="display: none;">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
</select>
<select style="display: none;">
<option value="one">a</option>
<option value="two">b</option>
<option value="three">c</option>
<option value="four">d</option>
</select>
<select style="display: none;">
<option value="one">aa</option>
<option value="two">bb</option>
<option value="three">cc</option>
<option value="four">dd</option>
</select>
</div>
</body>
</html>