当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

js三级联动下拉框

发表于: 2014-12-30   作者:3213213333332132   来源:转载   浏览:
摘要: //三级联动 省/直辖市<select id="province"></select> 市/省直辖<select id="city"></select> 县/区 <select id="area"></select>
//三级联动  
   省/直辖市<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>  

js三级联动下拉框

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修
主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修
一:图片预览: 二:js代码如下: <html> <head> <title>年月日三下拉框联动<
效果图: 完整代码: <html> <head> <title>年月日三下拉框联动</title> &l
效果图: 完整代码: <html> <head> <title>年月日三下拉框联动</title> &l
1.效果如图所示: 2.html代码: [php] view plaincopy <li><span class="receiving">所
在新生入学过程中,会添加自己的个人信息,如生源地或者家庭住址等。像这样的信息如果让学生自己输
前些天,做网站用需要用到一个省市县的三级联动,数据要从数据库里面读取,我想了下思路,动手写了
http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下: 何不直接
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号