`
3213213333332132
  • 浏览: 79926 次
社区版块
存档分类
最新评论

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>  
分享到:
评论

相关推荐

    asp二级联动下拉框,三级联动下拉框

    ASP(Active Server Pages...综上所述,ASP二级和三级联动下拉框的实现涉及前端HTML、JavaScript/AJAX,后端ASP处理逻辑,以及数据库操作。这种功能在很多Web应用中都有广泛应用,为用户提供更直观、更高效的交互体验。

    基于layui开发的省市区三级联动下拉框.zip

    本项目"基于layui开发的省市区三级联动下拉框"是一个典型的前端组件开发实例,它利用layui和vue.js来实现地理信息的三级联动选择功能。 首先,我们来了解一下layui。layui是一款中国本土的开源前端框架,它提供了...

    简单的vue三级联动下拉框代码

    本示例中提到的"简单的vue三级联动下拉框代码"是Vue.js应用场景的一个常见实例,常用于构建复杂的表单组件,如地区选择、商品分类筛选等。 一、Vue.js 三级联动下拉框基础概念 1. Vue.js:Vue.js 是一套用于构建...

    layui-省市县三级联动下拉框-HTML源码

    本文将详细介绍如何使用HTML、JavaScript(通常配合jQuery)以及可能涉及的CSS来实现"layui-省市县三级联动下拉框"的功能,并探讨其可扩展性。 首先,`layui`是一个流行的前端UI框架,它提供了一套美观、响应式的...

    JS实现三级联动下拉框

    下面我们将详细探讨如何使用JavaScript实现三级联动下拉框。 首先,我们需要准备HTML结构。每个下拉框(`&lt;select&gt;`)都需要一个唯一的ID,以便于JavaScript获取和操作它们。例如: ```html &lt;select id="province"&gt;...

    AJAX版省市区三级联动下拉框

    在IT领域,"AJAX版省市区三级联动下拉框"是一种常见的前端交互设计,尤其在网站表单中,用于用户选择地理位置时。这个技术基于AJAX(Asynchronous JavaScript and XML),它允许网页在不刷新整个页面的情况下与...

    三级联动 下拉框

    首先,三级联动下拉框的工作原理是基于JavaScript或jQuery等前端库来实现的。当用户在第一级下拉框中做出选择时,通过触发事件监听器,会动态更新第二级下拉框的内容;同样的,第二级的选择会影响第三级下拉框的选项...

    三级联动下拉框实现

    在网页设计和开发中,"三级联动下拉框"是一种常见的交互形式,它通常用于处理层级关系的数据,如行政区划、商品分类等。这个技术的关键在于通过JavaScript或者jQuery等前端库来实现各个下拉框之间的联动效果。当用户...

    Ajax实现三级联动下拉框

    ### Ajax实现三级联动下拉框的关键技术点与实践 在现代Web开发中,动态加载数据并更新页面元素的能力是提升用户体验的重要手段之一。三级联动下拉框作为一个常见的交互设计,常用于显示具有层级关系的数据,如省份...

    解决layui 三级联动下拉框更新时回显的问题

    最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 &lt;&#37;--监听省份选择 --%&gt; form.on('select(uprovinceId)', function(data){ initCityList('change')...

    php 三级联动下拉框

    在网页设计中,三级联动下拉框是一种常见的交互元素,特别是在数据层级结构比较复杂的场景下,如地区选择、产品分类等。它通过三个下拉菜单的级联关系,让用户能够逐步细化选择,从大类到小类,最终精确地选取目标...

    mvc3二级联动下拉框

    对于二级联动下拉框,这两个下拉框可能会通过JavaScript或jQuery动态更新。 3. 模型(Models):模型封装了业务数据和逻辑,为控制器和视图提供数据来源。在二级联动下拉框的场景中,模型可能包含两个列表,分别...

    layui-省市县三级联动下拉框效果.rar

    在IT开发领域,尤其在前端开发中,"layui-省市县三级联动下拉框效果"是一种常见的需求,常用于地址选择、区域筛选等场景。Layui是一个优秀的国产前端UI框架,它提供了丰富的组件和API,使得开发者可以方便地实现各种...

    利用百度地图开源数据构建省市区三级联动下拉框

    在构建省市区三级联动下拉框时,我们可以利用其提供的行政区划数据。 1. **获取数据**: 百度地图提供了JSON格式的行政区划数据,可以通过API接口获取。通常,这些数据包括省份、城市、区县等各级行政区域的信息。...

    省,市,区三级联动下拉框

    在网页设计和开发中,"省,市,区三级联动下拉框" 是一个常见的功能需求,主要用于用户在填写地址信息时提供便捷的选择方式。这种设计通常涉及到前端交互和后端数据支持,使得用户能够在选择省份后,下拉框自动更新...

    jQuery全国高校三级联动下拉框.zip

    在前端开发中,"jQuery全国高校三级联动下拉框"是一个常见的交互功能,它主要用于实现用户在选择高校时,根据一级、二级、三级行政区域进行筛选。这种功能常见于招生报名系统、招聘信息发布平台等,提供了便捷的用户...

    基于layui开发的省市区三级联动下拉框

    "基于layui开发的省市区三级联动下拉框"是一个典型的前端组件,它利用layui框架来实现一个功能强大的交互式选择器,帮助用户在网页上便捷地选择省份、城市和区县。 layui是一款轻量级的前端UI框架,它的设计目标是...

    三级联动下拉框

    在这个案例中,我们讨论的是如何在JavaScript环境中,利用Ajax技术实现一个基于Word版本的三级联动下拉框。 首先,我们需要在数据库中创建三个表,分别代表省份、城市和区域(区县)。这些表通常包含`id`作为主键,...

    纯JS实现地区选择三级联动下拉框

    在网页开发中,"纯JS实现地区选择三级联动下拉框"是一个常见的需求,它涉及到JavaScript(JS)的基础知识、DOM操作以及事件处理等技术。下面将详细解释这个主题涉及的关键知识点。 首先,理解“三级联动”:在地区...

Global site tag (gtag.js) - Google Analytics