码迷,mamicode.com
首页 > Web开发 > 详细

JS实现省市二级联动

时间:2016-02-10 22:10:25      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>省市二级联动</title>
    <script>
    /*
        找对象,找事件,实现相应的方法
     */
    var sheng = [请选择,广东省,湖南省,湖北省];
    var shi = [[],[广州市,深圳市,东莞市],[长沙,株洲,湘潭],[武汉市,咸宁市,天门市]];
    function $(id){
        return document.getElementById(id);
    }

    function createsheng(){
        for(var i=0;i < sheng.length;i++){
            var op = new Option(sheng[i],sheng[i]);
            $(sheng).options.add(op);
        }

    }

    function createshi(){
        var shengIndex = $(sheng).selectedIndex;
        $(shi).length = 0;
        for(var i = 0;i < shi[shengIndex].length;i++){
            var op = new Option(shi[shengIndex][i],shi[shengIndex][i]);
            $(shi).options.add(op);
        }
        
    }

    window.onload = function(){
        createsheng();
        $(sheng).onchange = createshi;
    }
    </script>
</head>
<body>
省:<select id="sheng"></select>
市:<select id="shi"></select>
</body>
</html>

效果:

技术分享

JS实现省市二级联动

标签:

原文地址:http://www.cnblogs.com/bybelief/p/5186140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!