使用jquery 匿名内部类实现下拉列表三级联动

最新推荐文章于 2022-06-15 11:31:01 发布

静山晚风

最新推荐文章于 2022-06-15 11:31:01 发布

阅读量735

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/cgwcgw_/article/details/45396873

版权

Jquery 专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>3434</title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){
function Pos(){
this.item={};
};
Pos.prototype.add = function(id,value){
this.item[id] = value;
}

var pos = new Pos();
pos.add('0',['北京','上海']);
pos.add('0_0',['东城区','西城区']);
pos.add('0_0_0',['胡同1','胡同2','胡同3','胡同4']);
pos.add('0_0_1',['胡同5','胡同6','胡同7','胡同8']);
pos.add('0_1',['浦东区','浦西区']);
pos.add('0_1_0',['胡同9','胡同10','胡同11','胡同12']);
pos.add('0_1_1',['胡同13','胡同14','胡同15','胡同16']);

function init(){
var $op=$('<option></option>');
var sharr= pos.item['0'];
for (var i = 0; i < sharr.length; i++) {
var $op=$('<option></option>');
$op.val(sharr[i]);
$op.text(sharr[i]);
$('#sheng').append($op);
};
}
init();
$("select").change(function(){
var index = $("select").index($(this));
if(index==0){
var ind=$(this).get(0).selectedIndex;
if((ind-1) >=0){
var shiarr = pos.item['0_'+(ind-1)];
clearOps($('#shi'));
for (var i = 0; i < shiarr.length; i++) {
var $op=$('<option></option>');
$op.val(shiarr[i]);
$op.text(shiarr[i]);
$('#shi').append($op);
};
}
}

if(index==1){
var prevind=$('#sheng').get(0).selectedIndex;
var ind=$(this).get(0).selectedIndex;
if((ind-1) >=0){
var xianarr = pos.item['0_'+(prevind-1)+'_'+(ind-1)];
clearOps($('#xian'));
for (var i = 0; i < xianarr.length; i++) {
var $op=$('<option></option>');
$op.val(xianarr[i]);
$op.text(xianarr[i]);
$('#xian').append($op);
};
}
}
});

function clearOps($sel){
$sel.find("option:not(:eq(0))").remove();
};
});

</script>
</head>
<body>
<div>
<select id='sheng'>
<option value='Select'>Select</option>
</select>
<select id='shi'>
<option value='Select' >Select</option>
</select>
<select id='xian'>
<option value='Select'>Select</option>
</select>
</div>
</body>
</html>

静山晚风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用jquery 匿名内部类实现下拉列表三级联动

3434 jQuery(function(){ function Pos(){ this.item={}; }; Pos.prototype.add = function(id,value){ this.item[id] = value; } var pos = new
复制链接

扫一扫