你的位置:首页 > Java教程

[Java教程]三级联动代码


html代码:

<html>
<head>
<title>liandong.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/liandong.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
<select name="s1">
<option value="">请选择1</option>
<option value="春">春</option>
<option value="夏">夏</option>
<option value="秋">秋</option>
<option value="冬">冬</option>
</select>
<select name="s2">
<option value="">请选择2</option>
</select>
<select name="s3">
<option value="">请选择专业3</option>
</select>
</body>
</html>

 

jQuery代码:

$(document).ready(function() {
var index=-1;
var indey=-1;
var arr1=["春","夏","秋","冬"];
var arr2=[["1","2","3"],["4","5","6"],["7","8","9"],["10","11","12"]];
var arr3=[[['a','b','c'],['d','e','f'],['h','i','j']],[['k','l','m'],['n','o','p'],['q','r','s']],[['t','u','v'],['w','x','y'],['z','g','a1']],[['b1','c1','d1'],['e1','f1','g1'],['h1','i1','j1']]];
$("select[name='s1']").change(function() {

var val1=$(this).val();
for ( var x = 0; x < arr1.length; x++) {

if(val1==arr1[x]){
index=x;
break;
}
}
$("select[name='s2'] option:gt(0)").remove();
var array1=arr2[index];
for ( var i = 0; i < array1.length; i++) {
$("<option value='"+array1[i]+"'>"+array1[i]+"</option>").appendTo($("select[name='s2']"));
}
$("select[name='s2']").change(function() {
var val2=$(this).val();
out:for ( var x1 = 0; x1 < arr2.length; x1++) {

for(var y=0;y<arr2[x1].length;y++){
if(val2==arr2[x1][y]){
index=x1;
indey=y;
break out;
}
}
}
var array2=arr3[index][indey];
$("select[name='s3'] option:gt(0)").remove();
for ( var i = 0; i < array2.length; i++) {
$("<option value='"+array2[i]+"'>"+array2[i]+"</option>").appendTo($("select[name='s3']"));
}
});
});

});