asp.net 实现省市级联-----<简单方法2>----前台实现

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #_body
        {
        }
    </style>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        var json = {
            "河北省": ["石家庄", "邯郸", "保定"],
            "河南省": ["郑州", "洛阳", "安阳"],
            "山东省": ["济南", "青岛", "德州"]
        }
        $(function () {
            loadPro(json);
        })
        function loadPro(json) {
            var $select = $("#province");
            for (var key in json) {
                var $option = $("<option>" + key + "</option>")
                $select.append($option);
            }
        }
        function loadcity() {
            //1.获取当前选择的值,2,遍历3,添加
            var $pro = $("#province");
            var $city = $("#city");
            var key_v = $pro.val();
            var citys = json[key_v];
            var city = $city.get(0);
            city.innerHTML = "";
            for (var i = 0; i < citys.length; i++) {
                var $option = $("<option>" + citys[i] + "</option>")
                $city.append($option);
            }
        }
    </script>
</head>
<body id="_body">
    <select id="province" onchange="loadcity()">
    
    </select>
    <br />
    <select id="city">
    </select>
</body>
</html>

  

posted @ 2012-06-18 15:07  爱吃猫的鱼  阅读(296)  评论(0编辑  收藏  举报