<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script language='javascript' src='./js/jquery.js'></script>
<script type="text/javascript">
var c1 = ['广东', '湖北'];
var c2 = [['广州', '深圳', '东莞'], ['武汉', '十堰', '襄阳']];
// 省市二级联动
$(document).ready(function(){
select1();
$('#select1').bind('change', function(){
select2();
});
});
// 第一级
function select1(){
var city1 = $('#select1');
for(var i in c1){
var option = new Option(c1[i], c1[i]);
city1[0].options.add(option);
}
}
// 第二级
function select2(){
var city1 = $('#select1');
var city2 = $('#select2');
city2[0].length = 0;
var index = city1[0].selectedIndex;
for(var i=0, len=c2[index].length; i<len; ++i){
var option = new Option(c2[index][i],c2[index][i]);
city2[0].options.add(option);
}
}
</script>
</head>
<body>
<!--<div style="float:left; cursor:pointer;"><img src="./images/1.png" οnclick="display(this)"></div>-->
<form>
<select id = 'select1''></select>
<select id = 'select2'></select>
</form>
</body>
</html>
jQuery 二级联动
最新推荐文章于 2022-08-04 09:08:15 发布