js三级联动下拉框

//三级联动  
   省/直辖市<select id="province"></select>  
   市/省直辖<select id="city"></select>  
   县/区 <select id="area"></select>  
  
   <!-- JQuery方式 -->  
   <script type="text/javascript">  
    $().ready(function() {  
        var coco = "coco";  
            //ajax  
            $.ajax({  
                url: "Test",  
                dataType: "json",  
                data: {myName: "coco"},  
                success: function(data) {  
                    for(var i=0;i<data.length;i++) {  
                     alert(data[i].city + data[i].id);  
                    }                 
                }  
                  
            });  
            // getJSON    
        $.getJSON('Test', function(data) {  
            alert(data)  
            alert(data[1].city)  
            alert(data[0].id)  
        });  
    });  
   </script>  
     
   <!-- JS方式 -->  
   <script type="text/javascript">  
      window.onload = function() {  
        var req;  
        if(window.XMLHttpRequest) {  
            req = new XMLHttpRequest();  
        }else if(window.ActiveXObject) {  
            req = new ActiveXObject("Microsoft.XMLHTTP");  
        }else {alert("您的浏览器版本太旧咯");}  
        if(req) {  
            req.open("post", "Test", true);  
            req.send(null);  
            req.onreadystatechange = function() {  
                if(req.readyState == 4) {  
                    if(req.status == 200) {  
                    var data = eval('('+req.responseText+')');  
                    var province = document.getElementById("province");  
                    for(var i=0;i<data.length;i++) {  
                        province.options.add(new Option(data[i].city, data[i].id));  
                    }  
                    var city = document.getElementById("city");  
                    var option = document.createElement("option");  
                    option.value = 1;  
                    option.innerHTML = "北京";  
                    city.appendChild(option);     
                    }else {  
                        alert("现在的状态" + req.statusText);  
                    }  
                }else {  
                    document.getElementById("province").innerText = "加载中...";  
                }  
            }  
        }  
      }  
   </script>  

你可能感兴趣的:(三级联动)