`

三级联动二——-js文件处理

阅读更多

js处理
var xmlHttp;
var type;
function refreshList(selecttype)
{
        type = selecttype;
        if(type == 'c')
        {
                var country = document.getElementById("country").value;
                if(country == "")
                {
                        clearList('c');
                        return;
                }
                var url = "DisplayServlet?state=country&countryId="+country;
                sendRequest(url,type);
        }
        if(type == 'c1')
        {
                var country = document.getElementById("country1").value;
                if(country == "")
                {
                        clearList('c1');
                        return;
                }
                var url = "DisplayServlet?state=country&countryId="+country;
                sendRequest(url,type);
        }
        if(type == 'p')
        {
                var province = document.getElementById("prov").value;
                if(province == "")
                {
                        clearList('p');
                        return;
                }
                var url = "DisplayServlet?state=province&provinceId="+province;
                sendRequest(url,type);
        }
        if(type == 'p1')
        {
                var province = document.getElementById("prov1").value;
                if(province == "")
                {
                        clearList('p1');
                        return;
                }
                var url = "DisplayServlet?state=province&provinceId="+province;
                sendRequest(url,type);
        }
}

function CreateXmlHttpRequest()
{
        try
        {
                xmlHttp = new XMLHttpRequest();
        }catch(e)
        {
                try
                {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }catch(e)
                {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
        }
        return xmlHttp;
}

function sendRequest(url,type)
{
        CreateXmlHttpRequest();
        xmlHttp.open('GET',url,true);
        xmlHttp.onreadystatechange = processResponse;
        xmlHttp.send(null);
}

function processResponse()
{
        if(xmlHttp.readyState == 4)
        {
                if(xmlHttp.status == 200)
                {
                        updateList(type);
                }
        }
}

function updateList(type)
{
        if(type == 'c')
        {
                clearList(type);
                var province = document.getElementById("province");
                var results = xmlHttp.responseText;
                province.innerHTML="<select name='prov' id='prov' onChange=refreshList('p')>"+results+"</select>";
        }
        if(type == 'c1')
        {
                clearList(type);
                var province = document.getElementById("province1");
                var results = xmlHttp.responseText;
                province.innerHTML="<select name='prov1' id='prov1' onChange=refreshList('p1')>"+results+"</select>";
               
        }
        if(type == 'p')
        {
                var city = document.getElementById("city");
                var results = xmlHttp.responseText;
                city.innerHTML="<select name='city'>"+results+"</select>";
        }
        if(type == 'p1')
        {
                clearList(type);
                var city = document.getElementById("city1");
                var results = xmlHttp.responseText;
                city.innerHTML="<select name='city1'>"+results+"</select>";
        }
}

function clearList(type)
{
        if(type == 'c')
        {
                var province = document.getElementById("province");
                while(province.childNodes.length > 2)
                {
                        province.removeChild(province.childNodes[1]);
                }
        }
        if(type == 'c1')
        {
                var province = document.getElementById("province1");
                while(province.childNodes.length > 2)
                {
                        province.removeChild(province.childNodes[1]);
                }
        }
        if(type == 'p')
        {
                var city = document.getElementById("city");
                while(city.childNodes.length > 2)
                {
                        city.removeChild(city.childNodes[1]);
                }
        }
        if(type == 'p1')
        {
                var city = document.getElementById("city1");
                while(city.childNodes.length > 2)
                {
                        city.removeChild(city.childNodes[1]);
                }
        }
}

分享到:
评论

相关推荐

    前端经典——vue-三级联动demo.rar

    在这个"前端经典——vue-三级联动demo"中,我们将深入探讨如何在Vue.js中实现一个三级联动的功能,这是一种常见的数据筛选和交互设计,常见于如地区选择、商品分类等场景。 首先,三级联动的基本概念是指三个层级的...

    lg三级联动——好东西

    在给定的标题"lg三级联动——好东西"中,"lg"可能是某个UI库或组件的缩写,比如"Lightweight Grid"或者"Layer Grid",它提供了实现三级联动功能的组件。这个标题暗示我们这里有一个关于三级联动的优秀解决方案,可能...

    三级联动大全_js+jsion三级联动_xml+js+jquery三级联动.rar

    【标题】"三级联动大全_js+json三级联动_xml+js+jquery三级联动.rar"涉及到的是网页交互中的一个重要技术——三级联动。这个压缩包文件包含了多种实现三级联动效果的方法,包括JavaScript(js)、JSON(jsion)、XML...

    省市区的三级联动——province.js

    省市区的三级联动的javaScript,用于省市区三级联动,可以使用的!

    微信小程序——省市县三级联动,实时通过后台调用PHP代码获取数据

    由于项目频繁用到三级联动,比如地区、时间、分类,这些网络上不能满足,所以我们通过后台调用的方式来实现 后台我使用的是PHP语言 目录结构: |-client |---pages |-----index |-------index.js //包含初始化数据...

    移动端、h5省市区三级联动

    综上所述,移动端、H5省市区三级联动的实现涉及前端技术、移动端适配、数据管理、事件处理等多个方面,开发者需要对这些技术有扎实的掌握。通过分析提供的文件,我们可以进一步研究其具体实现方式,学习和借鉴其中的...

    省市县三级联动——轻松完美嵌入项目中(更适合于初学者)

    在IT开发领域,尤其是前端开发中,"三级...总之,"省市县三级联动——轻松完美嵌入项目中"是一个面向初学者的实用教程,通过学习和实践,开发者不仅可以掌握这一常见功能的实现,还能进一步提升自己的前端开发技能。

    ElementUI三级联动菜单代码

    在提供的压缩包中,`readme.md`文件可能包含了关于如何配置和使用这个三级联动菜单的详细说明,而`ElementUI三级联动菜单代码`文件则包含具体的实现代码。开发者可以通过阅读`readme.md`了解使用步骤,然后参考代码...

    基于LayUI省市区三级联动

    在本文中,我们将深入探讨如何实现基于LayUI的省市区三级联动功能。LayUI是一个流行的前端开发框架,以其简洁、高效的特性受到广大开发者喜爱。三级联动在Web开发中常用于地址选择,用户在选择省份后,下拉菜单会...

    地图三级联动以及各省各城市json文件

    地图三级联动是一种常见的数据可视化技术,常用于展示地理信息,如中国的省份、城市等层级关系。在本案例中,我们使用的是一种基于JavaScript的数据可视化库——ECharts,它提供了丰富的地图图表功能,包括自定义...

    jquery省市区三级联动插件(数据全)

    这个“jquery省市区三级联动插件”是为了解决一个常见的前端开发需求——实现省市区选择的联动效果。这种功能常见于用户注册、地址填写等场景,能够提供用户友好的交互体验。 首先,我们要理解什么是“三级联动”。...

    城市选择器——三级联动

    三级联动的城市选择器通常指的是省-市-区/县的逐级选择结构,用户首先选择省份,接着根据省份的选择结果展示对应的城市列表,最后在选择城市后,显示该城市下属的区县选项。这种设计可以方便用户快速、准确地找到...

    web 编辑器 三级联动 程序创建数据 demo

    JavaScript通过读取XML文件,解析出这些数据,并根据用户的操作动态生成和更新二级、三级联动菜单。这涉及到DOM(Document Object Model)操作,如`XMLHttpRequest`用于异步加载XML,`document.createElement`和`...

    ASP.NET源码——Ajax三级联动和无刷新分页源码.zip

    这个压缩包"ASP.NET源码——Ajax三级联动和无刷新分页源码.zip"提供了两个关键功能的实现:Ajax三级联动和无刷新分页。 **Ajax三级联动**是Web开发中的常见交互模式,主要用于提升用户体验。在传统的网页交互中,...

    jQuery商品发布三级联动菜单代码

    本示例中的"jQuery商品发布三级联动菜单代码"是为了解决一个常见的交互设计问题——商品分类选择。在电商网站或拥有复杂分类系统的平台中,商品分类通常分为多个级别,以便更精确地组织和查找产品。三级联动菜单则是...

    三级联动区域选择

    总的来说,“三级联动区域选择”是一个涉及前端交互设计、后端数据处理以及数据库管理的综合性问题。在实际开发中,我们需要考虑数据的实时性、响应速度以及用户友好性等多个方面,确保功能的稳定性和易用性。

    jquery ajax 三级联动

    "三级联动"是一种常见的功能,特别是在处理地理位置数据时,如省、市、区的选择。在这个场景下,用户选择一个省份后,相关的城市会自动加载;接着选择城市,对应的区县又会动态显示出来。这种功能在注册、地址填写等...

    省市区三级联动Dialog

    总结来说,“省市区三级联动Dialog”是Web应用中实现地理信息选择的一种常见方式,涉及前端UI设计、JavaScript交互逻辑、Ajax异步通信以及后端接口开发等多个环节。理解和掌握这一知识点对于提升Web应用的用户体验至...

    严格的三级联动日期下拉菜单

    本文将详细介绍一个具体的实现案例——“严格的三级联动日期下拉菜单”,该组件不仅实现了基本的日期选择功能,还具备了自动判断闰年的高级特性。 #### 核心功能概述 此三级联动日期下拉菜单主要包括以下核心功能...

Global site tag (gtag.js) - Google Analytics