`
zx_00
  • 浏览: 5959 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

省市区三级联动

三级联动联动菜单省市区联动 
阅读更多

一个省市区三级联动菜单

 

<script>

        var myproc = ["省1","省2","省3","省4"];

        var mycity = new Array();

        mycity[0] = ["省1市1","省1市2","省1市3","省1市4"];

        mycity[1] = ["省2市1","省2市2","省2市3"];

        mycity[2] = ["省3市1","省4市2"];

        mycity[3] = ["省4市1","省4市2"];

 

        var myregion = new Array();

        myregion[0]=new Array();

        myregion[1]=new Array();

        myregion[2]=new Array();

        myregion[3]=new Array();

        myregion[0][0]=["省1市1区1","省1市1区2"];

        myregion[0][1]=["省1市2区1","省1市2区2"];

        myregion[0][2]=["省1市3区1","省1市3区2"];

        myregion[0][3]=["省1市4区1","省1市4区2"];

        myregion[1][0]=["省2市1区1","省2市1区2"];

        myregion[1][1]=["省2市2区1","省2市2区2"];

        myregion[1][2]=["省2市3区1","省2市3区2"];

        myregion[2][0]=["省3市1区1","省3市1区2"];

        myregion[2][1]=["省3市2区1","省3市2区2"];

        myregion[3][0]=["省4市1区1","省4市1区2"];

        myregion[3][1]=["省4市2区1","省4市2区2"];

 

        function addproc(){

            var proc = document.getElementById("proc");

            for(var i=0; i<myproc.length; i++){

                var op = document.createElement("option");

                var city = document.createTextNode(myproc[i]);

                op.appendChild(city);

                proc.appendChild(op);

            }

        }

 

        function selproc(){

            var proc = document.getElementById("proc");

            var city = document.getElementById("city");

            var region = document.getElementById("region");

            city.options.length=1;

            region.options.length=1;

            if(proc.value=="-1"){

                document.getElementById("mytxt").value="";

            }else{

                var num = proc.options.selectedIndex;

                for(var i=0; i<mycity[num-1].length; i++){

                    var op = document.createElement("option");

                    var city1 = document.createTextNode(mycity[num-1][i]);

                    op.appendChild(city1);

                    city.appendChild(op);

                }

            }

        }

 

        function selcity(){

            var proc = document.getElementById("proc");

            var city = document.getElementById("city");

            var region = document.getElementById("region");

            region.options.length=1;

            if(proc.value=="-1"){

                document.getElementById("mytxt").value="";

            }else{

                var num = proc.options.selectedIndex;

                var n  = city.options.selectedIndex;

                for(var i=0; i<myregion[num-1][n-1].length; i++){

                    var op = document.createElement("option");

                    var r = document.createTextNode(myregion[num-1][n-1][i]);

                    op.appendChild(r);

                    region.appendChild(op);

                }

            }

        }

    </script>

</head>

<body onload="addproc()">

选择省市地区：

<select id="proc" name="proc" onchange="selproc()">

    <option value="-1">--请选择省份--</option>

 

</select>

<select id="city" name="city" onchange="selcity()">

    <option value="-1">--请选择城市--</option>

</select>

<select id="region" name="region"  onchange="selregion()">

    <option value="-1">--请选择地区--</option>

</select>

分享到：
| 文字从右到左滚动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Android省市区三级联动滚轮选择——Cascade_Master

    "Android省市区三级联动滚轮选择——Cascade_Master"是一个专门为解决这一问题而设计的组件。这个组件是从实际项目中提炼出来的，旨在提供一个高效、直观且易于集成的解决方案。 该组件是基于开源库`Android-wheel`...

    JavaScript 省市区三级联动 json文件

    省市区三级联动 , JavaScript 省市区三级联动 json文件,JavaScript 省市区三级联动 json文件

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

    在移动端和H5开发中，省市区三级联动是一种常见的功能需求，主要用于地址选择，提供用户一个方便快捷的方式来选择他们的详细地址。本示例提供了一款适用于这两种平台的三级联动组件，下面将详细介绍这个功能及其实现...

    省市区三级联动json数据

    省市区三级联动数据库 省市区三级联动数据库,包含地区的区号、邮政编码以及区域的坐标位置信息。三级联动

    Bootstrap实现省市区三级联动(亲测可用)

    ### 知识点一：Bootstrap框架及其在省市区三级联动中的应用 Bootstrap是一套流行的前端框架，由Twitter的设计师和开发人员开发。它基于HTML、CSS和JavaScript，旨在简化网站的响应式和移动设备开发。Bootstrap提供...

    Android省市区三级联动

    在Android开发中，"省市区三级联动"是一个常见的功能需求，尤其在地址选择、定位服务等场景中。这个功能涉及到用户界面（UI）设计、数据处理以及事件监听等多个方面。以下将详细介绍如何在Android中实现这个功能。 ...

    省市区三级联动Java版

    标题中的“省市区三级联动Java版”指的是在Java开发中实现的一种常见的用户界面交互功能，通常用于地址选择。这个功能允许用户在三个下拉菜单中分别选择省份、城市和区县，形成一个完整的地址。这样的设计可以有效地...

    省市区三级联动js脚本

    ### 省市区三级联动JS脚本知识点解析 #### 一、概述 省市区三级联动是一种常见的用户界面设计模式，通常用于需要用户选择地址信息（如省份、城市、区县）的应用场景。通过这种设计模式，可以实现当用户选择了某一...

    java 省市区三级联动

    在IT领域，"省市区三级联动"是一种常见的前端交互功能，尤其在地址选择、订单填写等场景中广泛应用。这个功能的实现通常涉及到后端数据的获取以及前端展示的逻辑处理，涉及的技术包括Java和JavaScript。这里我们将...

    微信小程序 省市区三级联动选择

    微信小程序的省市区三级联动选择是一个常见的功能，用于在用户输入地址时提供便捷的选择体验。这一功能涉及到小程序的UI设计、数据处理以及事件交互等多个方面。以下是对这一知识点的详细阐述： 1. **UI组件使用**...

    手机移动端3d滑动省市区三级联动

    在移动应用开发中，"手机移动端3D滑动省市区三级联动"是一个常见的功能需求，尤其是在用户填写地址信息时。这个功能旨在提供一种流畅、直观的用户体验，通过3D滚动效果来选择省级、市级和区级行政区域。下面将详细...

    php+mysql+jquery省市区三级联动

    在IT行业中，省市区三级联动是一种常见的前端交互功能，它通常用于地址选择或者地区筛选等场景。本项目“php+mysql+jquery省市区三级联动”是实现这一功能的一个实例，结合了后端PHP、数据库MySQL以及前端jQuery技术...

    省市区三级联动实现

    在IT行业中，省市区三级联动是一种常见的前端交互功能，它常见于地址选择、地图应用、信息填写等场景。这个功能的实现主要是为了提供一个流畅的用户体验，让用户能够方便快捷地选择到精确的地理位置。在本案例中，...

    基于LayUI省市区三级联动

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

    超好用的省市区三级联动+常用城市设置

    在IT领域，尤其是在前端开发中，"省市区三级联动"是一种常见的交互设计，它用于用户在填写地址时方便快捷地选择所在的省份、城市和区县。这种设计通常涉及到JavaScript、CSS和HTML等技术的结合使用，以实现下拉菜单...

    uniapp使用uview组件实现省市区三级联动

    在本文中，我们将深入探讨如何在uni-app框架中利用uView UI组件库来实现省市区三级联动的效果。uni-app是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、H5、小程序等多个平台运行。...

Magicbox
Global site tag (gtag.js) - Google Analytics