jQuery 중국 성시 2 급 연동 (실 용)

다음으로 이동: http://blog.csdn.net/yimiyuangguang/article/details/23556469
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>        </title>  
    <style type="text/css">  
        select  
        {  
            width: 135px;  
        }  
        fieldset dl dd  
        {  
            float: left;  
            margin-left: 20px;  
        }  
        fieldset pre  
        {  
            width: 100%;  
            height: 400px;  
            overflow-y: scroll;  
            overflow-x: hidden;  
        }  
    </style>  
    <!-- jQuery      -->  
    <script language="javascript" type="text/javascript" src="JS/jquery-1.7.1.min.js"></script>  
    <script type="text/javascript" language="javascript">  
        //    ,        
        var province = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ",  
                        "  ", "   ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ",  
                        "  ", "  ", "  ", "  ", "   ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
  
        //    ,        
        var beijing = ["   ", "   ", "   ", "   ", "   ", "    ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "    ", "   ", "   "];  
        var shanghai = ["    ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   "];  
        var tianjing = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var chongqing = ["   ", "    ", "   ", "    ", "    ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   "];  
        var jiangsu = ["  ", "  ", "  ", "  ", "  ", "  ", "   ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var zhejiang = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var guangdong = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var fujiang = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var hunan = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "   ", "  ", "  ", "  ", "  ", "  ", "         "];  
        var hubei = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "          "];  
        var liaoning = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "   "];  
        var jilin = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "        "];  
        var heilongjiang = ["   ", "    ", "  ", "   ", "   ", "  ", "  ", "  ", "    "];  
        var hebei = ["   ", "  ", "  ", "  ", "  ", "  ", "  ", "   ", "   "];  
        var henan = ["  ", "  ", "  ", "  ", "  ", "  ", "   ", "  ", "  ", "  ", "  ", "  ", "   ", "  ", "  ", "   ", "  "];  
        var shandong = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var shangxi = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var gansu = ["  ", "   ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var qinghai = ["  ", "    ", "       ", "       ", "       ", "       ", "       ", "          "];  
        var xinjiang = ["    ", "  ", "   ", "  ", "   ", "   ", "   ", "  ", "  ", "    ", "  ", "  ", "  ", "   ", "   ", "  "];  
        var shanxi = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var sichuan = ["  ", "  ", "   ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "         ", "       ", "       "];  
        var guizhou = ["  ", "   ", "  ", "  ", "          ", "           ", "          ", "  ", "  "];  
        var anhui = ["  ", "  ", "  ", "   ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var jiangxi = ["  ", "  ", "   ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var yunnan = ["  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "       ", "       ", "          ", "         ", "         ", "          ", "        ", "       "];  
        var neimenggu = ["    ", "  ", "  ", "  ", "  ", "    ", "    ", "    ", "    "];  
        var guangxi = ["  ", "  ", "  ", "  ", "  ", "   ", "  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var xizang = ["  ", "    ", "    ", "    ", "     ", "    ", "    "];  
        var ningxia = ["  ", "   ", "  ", "  ", "  "];  
        var hainan = ["  ", "  "];  
       var xianggang = ["   ", "   ", "  ", "  ", "    ", "    ", "   ", "    ", "    ", "  ", "   ", "   ", "   ", "   ", "   ", "   ", "   ", "   "];  
        var taiwan = ["  ", "  ", "  ", "  ", "  ", "  ", "  "];  
        var aomeng = ["    ", "   ", "   "];  
  
        //        
        $(function () {  
            //        
            setProvince();  
  
            //        
            setBgColor();  
        });  
  
  
        //        
        function setProvince() {  
            //           
            var option, modelVal;  
            var $sel = $("#selProvince");  
  
            //          
            for (var i = 0, len = province.length; i < len; i++) {  
                modelVal = province[i];  
                option = "<option value='" + modelVal + "'>" + modelVal + "</option>";  
  
                //    select      
                $sel.append(option);  
            }  
  
            //  change  ,        
            provinceChange();  
        }  
  
  
        //                
        function setCity(provinec) {  
            var $city = $("#selCity");  
            var proCity, option, modelVal;  
  
            //      ,              
            switch (provinec) {  
                case "  ":  
                    proCity = beijing;  
                    break;  
                case "  ":  
                    proCity = shanghai;  
                    break;  
                case "  ":  
                    proCity = tianjing;  
                    break;  
                case "  ":  
                    proCity = chongqing;  
                    break;  
                case "  ":  
                    proCity = zhejiang;  
                    break;  
                case "  ":  
                    proCity = jiangsu;  
                    break;  
                case "  ":  
                    proCity = guangdong;  
                    break;  
                case "  ":  
                    proCity = fujiang;  
                    break;  
                case "  ":  
                    proCity = hunan;  
                    break;  
                case "  ":  
                    proCity = hubei;  
                    break;  
                case "  ":  
                    proCity = liaoning;  
                    break;  
                case "  ":  
                    proCity = jilin;  
                    break;  
                case "   ":  
                    proCity = heilongjiang;  
                    break;  
                case "  ":  
                    proCity = hebei;  
                    break;  
                case "  ":  
                    proCity = henan;  
                    break;  
                case "  ":  
                    proCity = shandong;  
                    break;  
                case "  ":  
                    proCity = shangxi;  
                    break;  
                case "  ":  
                    proCity = gansu;  
                    break;  
                case "  ":  
                    proCity = xinjiang;  
                    break;  
                case "  ":  
                    proCity = qinghai;  
                    break;  
                case "  ":  
                    proCity = shanxi;  
                    break;  
                case "  ":  
                    proCity = sichuan;  
                    break;  
                case "  ":  
                    proCity = guizhou;  
                    break;  
                case "  ":  
                    proCity = anhui;  
                    break;  
                case "  ":  
                    proCity = jiangxi;  
                    break;  
                case "  ":  
                    proCity = yunnan;  
                    break;  
                case "   ":  
                    proCity = neimenggu;  
                    break;  
                case "  ":  
                    proCity = xizang;  
                    break;  
                case "  ":  
                    proCity = guangxi;  
                    break;  
                case "":  
                    proCity = xizang;  
                    break;  
                case "  ":  
                    proCity = ningxia;  
                    break;  
                case "  ":  
                    proCity = hainan;  
                    break;  
                case "  ":  
                    proCity = xianggang;  
                    break;  
                case "  ":  
                    proCity = aomeng;  
                    break;  
                case "  ":  
                    proCity = taiwan;  
                    break;  
            }  
  
            //           
            $city.empty();  
  
            //           
            for (var i = 0, len = proCity.length; i < len; i++) {  
                modelVal = proCity[i];  
                option = "<option value='" + modelVal + "'>" + modelVal + "</option>";  
  
                //    
                $city.append(option);  
            }  
  
            //      
            setBgColor();  
        }  
  
  
        //        
        function provinceChange() {  
            var $pro = $("#selProvince");  
            setCity($pro.val());  
        }  
  
  
        //              
        function setBgColor() {  
            var $option = $("select option:odd");  
            $option.css({ "background-color": "#DEDEDE" });  
        }  
    </script>  
</head>  
<body>  
    <fieldset>  
        <legend>          </legend>  
        <dl>  
            <dd>  
                    :<select id="selProvince" onchange="provinceChange();"></select>  
            </dd>  
            <dd>  
                 ( ):<select id="selCity"></select>  
            </dd>  
        </dl>  
    </fieldset>  
</body>  
</html>  

효과 도 는 다음 과 같다.

좋은 웹페이지 즐겨찾기