简易二级联动下拉框

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
        .btn{
            outline:none; /**按钮区域的边框，非按钮边框**/
            cursor:pointer;
            border: 1px solid #dedede;   
            border-color:  #06c;
            background-color: #06c;      
            -webkit-border-radius: 10px;/**兼容苹果；谷歌**/     
            -moz-border-radius: 10px;/**兼容火狐浏览器*/  
            border-radius:10px;/**圆角属性，IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius，使用时需要放在-webkit、-moz之后**/   
            color:#FFF;/**按钮字体颜色**/
        }
        .inputInterval{/**输入框之间的间距**/
            margin-left:10px;
            margin-right:10px;
        }
        .area{
            width:500px;
            height:500px;
            margin:200px 800px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script>
        // 模拟数据  
        var pros = ['省份1','省份2','省份3'];
        var cities = [['省1_市1','省1_市2','省1_市3'],['省2_市1','省2_市2','省2_市3'],['省3_市1','省3_市2','省3_市3']];
        
        <!--页面加载时，为组件注册事件-->
        $(function(){
            $("#add").on('click',function(e){                
            });
            // 开发时，需先加载省份数据(全局变量保存)
            
            // 页面加载时为省份添加数据
            loadData("area");
        });        
        
        var lineNum = 1; // 行数
        var lineFlag = 1; //每行组件id标志
        // 加载省份
        function loadData(container){        
            // 省份数据
            var proHtml = "<div id='area"+lineFlag+"'>省份:<select id='province"+lineFlag+"' onchange='loadCity(this);'><option value='0'>--省份--</option></select></div>";
            $("#"+container).append(proHtml);
            // 填充省份数据
            for(var i=0;i<pros.length;i++){
                $("#province"+lineFlag).append('<option value='+pros[i]+'>'+pros[i]+'</option>');
            }    
            // 城市数据
            var cityHtml = "<span id='city"+lineFlag+"' class='inputInterval'>市:<select id='city_"+lineFlag+"'><option value='0'>--城市--</option></span>";    
            $("#area"+lineFlag).append(cityHtml);
            // 操作(增加、删除)
            if(lineFlag===1){
                $("#area"+lineFlag).append("<input id='add_"+lineFlag+"' type='button' class='btn' value='增加' onclick='addNewLine()'>");
            }else{
                $("#area"+lineFlag).append("<input id='del_"+lineFlag+"' type='button' class='btn' value='删除' onclick='delNewLine(this)'>");
            }
        }
        // 加载市
        function loadCity(province){
            // 获取元素下标
            var proIndex = jQuery.inArray(province.value,pros);
            // 取得省份对应的城市
            var targetCities = cities[proIndex];
            // 当前行标志
            var currentLineId = province.parentElement.id;
            var index = parseInt(currentLineId.substring(currentLineId.length-1,currentLineId.length)); 
            // 清空城市数据(避免重复追加)
            $("#city"+index).children().empty();
            // 添加新城市数据
            for(var i=0;i<targetCities.length;i++){
                $("#city_"+index).append('<option value='+targetCities[i]+'>'+targetCities[i]+'</option>');
            }            
        }        

        // 添加新行
        function addNewLine(){
            if(lineNum>4){
                alert("最多只能添加5条！！！");
                return;
            }
            lineNum += 1;
            lineFlag += 1;
            loadData("area");
        }
        // 删除新行
        function delNewLine(param){
            // 添加 增加or删除  按钮            
            var currentLineId = param.parentElement.id;
            var index = parseInt(currentLineId.substring(currentLineId.length-1,currentLineId.length)); // 当前行标志
            $("#area"+index).remove();
            lineNum -= 1;
        }
    </script>
</head>


<div>
   <div id="area" class="area">        
   </div>
</div>

</html>
posted @ 2018-02-07 18:17 lvlin241 阅读(420) 评论(0) 收藏举报
刷新页面返回顶部