您的位置：首页 > Web前端 > JQuery

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

2015-04-30 16:52 751 查看
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航