<html>
<head>
<title>简单的Select联动菜单代码</title>
<script type="text/javascript">
var arr_province = ["==请选择==", "篮球", "足球", "乒乓球", "其他"];
var arr_city = [
["==请选择=="],
["A01", "A02", "A03", "A04", "A05"],
["L01", "L02", "L03", "L04", "L05"],
[],
[],
];
function init() {
var province = document.form1.province;
province.style.width = 150 + "px";
var city = document.form1.city;
city.style.width = 150 + "px";
//给province赋值高度，才能在其里面写入内容
province.length = arr_province.length;
for (var i = 0; i < arr_province.length; i++) {
province.options[i].text = arr_province[i];
province.options[i].value = arr_province[i];
}
//设置默认被选中的选项
var index = 0;
province.selectedIndex = index;
//给city赋值高度，才能在其里面写入内容
city.length = arr_city[index].length;
for (var j = 0; j < arr_city[index].length; j++) {
city.options[j].text = arr_city[index][j];
city.options[j].value = arr_city[index][j];
}
}
function select_change(num) {
var city = document.form1.city;
city.length = 0;
city.length = arr_city[num].length;
for (var i = 0; i < arr_city[num].length; i++) {
city.options[i].text = arr_city[num][i];
city.options[i].value = arr_city[num][i];
}
}
</script>
</head>
<body onload="init()">
<form name="form1">
税总：<select name="province" onchange="select_change(this.selectedIndex)"></select>
类别：<select name="city"></select>
</form>
</body>
</html>
另一种：
1 <script type="text/javascript"> 2 $(function () { 3 4 $("#S_TYPE").change(function () { 5 var sz = $("#S_TYPE").val(); 6 $("#STATUS option").remove(); 7 if (sz == "寄件") { 8 $("#STATUS").prepend("<option value='A01'>前台</option>"); 9 $("#STATUS").prepend("<option value='A02'>部门</option>"); 10 $("#STATUS").prepend("<option value='A03'>已发件</option>"); 11 $("#STATUS").prepend("<option value='A04'>全部</option>"); 12 } 13 else if (sz == "收件") { 14 $("#STATUS").prepend("<option value='L05'>前台</option>"); 15 $("#STATUS").prepend("<option value='L04'>部门</option>"); 16 $("#STATUS").prepend("<option value='L03'>已收件</option>"); 17 $("#STATUS").prepend("<option value='L02'>全部</option>"); 18 } 19 else if (sz == "全部") { 20 $("#STATUS").prepend("<option value='前台'>前台</option>"); 21 $("#STATUS").prepend("<option value='L04'>部门</option>"); 22 $("#STATUS").prepend("<option value='L03'>已发件</option>"); 23 $("#STATUS").prepend("<option value='L02'>已收件</option>"); 24 $("#STATUS").prepend("<option value='L01'>全部</option>"); 25 } 26 27 }); 28 29 }); 30 </script>
1 <th style="text-align:left" class="auto-style3" >快件类型: 2 <select id="S_TYPE" runat="server" CssClass="Micro-12-black" Height="19px" Width="62px" > 3 <option>全部</option> 4 <option>寄件</option> 5 <option>收件</option> 6 </select> 7 </th> 8 9 10 <th style="text-align:right" class="auto-style2">快件状态:</th> 11 <td class="auto-style2"> 12 13 <select id="STATUS" CssClass="Micro-12-black" runat="server"> 14 <option id="f1">前台</option> 15 <option id="f2">部门</option> 16 <option id="f3">已发件</option> 17 <option id="f4">已收件</option> 18 <option id="f5">全部</option> 19 </select> 20 </td>