三级联动代码

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

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 class="sel1" name="s1">

<option value="">请选择1</option>

<option value="春">春</option>

<option value="夏">夏</option>

<option value="秋">秋</option>

<option value="冬">冬</option>

</select>

<select class="sel2" name="s2">

<option value="">请选择2</option>

</select>

<select class="sel3" 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']"));

}

});

});

});

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航