`
TonyBug
  • 浏览: 16435 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

js省市联动

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>省市联动</title>
</head>

<body>
<script language="javascript">

var areaArray = new Array();

  areaArray[areaArray.length]=new Array("10","北京市");

  areaArray[areaArray.length]=new Array("20","天津市");

  areaArray[areaArray.length]=new Array("30","上海市");

var townArray = new Array();

  townArray[townArray.length]=new Array("10","10010","东城区");
  townArray[townArray.length]=new Array("10","10011","西城区");
  townArray[townArray.length]=new Array("10","3000","朝阳区");
  townArray[townArray.length]=new Array("10","4000","海淀区");
  townArray[townArray.length]=new Array("10","5","宣武区");
  townArray[townArray.length]=new Array("10","6","崇文区");

  townArray[townArray.length]=new Array("20","1","南浔镇");

  townArray[townArray.length]=new Array("20","2","菱湖镇");

  townArray[townArray.length]=new Array("30","1","乐清");

  townArray[townArray.length]=new Array("30","2","苍南"); 

function setTown(obj1ID,obj2ID){

        var objArea = document.getElementById(obj1ID);

        var objTown = document.getElementById(obj2ID);

        var i;

        var itemArray = null;

        if(objArea.value.length > 0){

             itemArray = new Array();

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

                if(townArray[i][0]==objArea.value){

                    itemArray[itemArray.length]=new Array(townArray[i][1],townArray[i][2]);

                }

             }

        }

        for(i = objTown.options.length ; i >= 0 ; i--){

                objTown.options[i] = null;

        }

        objTown.options[0] = new Option("请选地区");

        objTown.options[0].value = "";

        if(itemArray != null){

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

                        objTown.options[i+1] = new Option(itemArray[i][1]);

                        if(itemArray[i][0] != null){

                           objTown.options[i+1].value = itemArray[i][0];

                        }

                }

        }

   } 

</script>

   <select name="areaid" id="areaid" onChange="setTown('areaid','townid')">

          <option value="">请选市县</option>

          <option value="10">北京</option>

      <option value="20">上海</option>

       <option value="30">安徽</option>

    </select>
<select name="townid" id="townid">

    <option value="">请选地区</option>

   </select>
</body>
</html>
分享到:
评论

相关推荐

    js省市联动结合数据库-最新修改版

    【JavaScript 省市联动与数据库...总的来说,"js省市联动结合数据库-最新修改版"是一个实用的解决方案,它结合了JavaScript的动态性、AJAX的异步通信以及数据库的数据存储,提供了便捷的默认值设置,提高了开发效率。

    js省市联动结合数据库版本

    PHP开发过程中经常使用到省市联动js,但是使用一般的js省市联动时提交的一般是汉字,数据库不可能直接存汉字的,也有的提交的是省市id,但是保存到数据库后查询时,又没有办法这个id对应的是哪个省份,城市,因为...

    js省市联动菜单

    总之,js省市联动菜单的实现是一个典型的前端交互案例,它展示了JavaScript在处理动态数据和用户交互方面的强大能力。通过学习和实践这类功能,开发者可以提升在网页动态化和用户体验优化方面的技能。

    js省市联动代码

    实现js省市联动的核心技术是JavaScript,一种广泛应用于客户端Web开发的脚本语言。以下是一些关键的知识点: 1. **DOM操作**:JavaScript通过Document Object Model (DOM)来操作HTML元素。在省市联动中,我们需要...

    js省市联动插件

    这个纯JavaScript的省市联动插件的核心原理包括以下几个方面: 1. 数据结构:首先,我们需要准备一个包含全国省市区县的数据结构。通常,这是一个嵌套的对象或数组,以省为顶层,市和区县分别作为子项。例如: ```...

    javascript 省市联动菜单

    实现JavaScript省市区联动菜单的关键在于利用事件监听、DOM操作和数据结构。首先,我们需要一个数据结构来存储中国所有省份、城市和区县的信息,通常是一个嵌套的对象或数组。例如: ```javascript var areas = { ...

    js省市联动 其他

    标题中的"js省市联动"指的是在前端开发中,使用JavaScript实现省市区选择框的联动效果。这是一种常见的功能,用户在选择省份时,市、区的选择框会根据所选省份动态更新选项,提供与省份相关联的下级行政区域供用户...

    JS省市联动 带说明文档

    从给定的文件信息来看,这是一段JavaScript代码,用于实现网页上的省市联动选择功能。在Web开发中,省市联动是一种常见的用户界面设计,主要用于让用户选择其所在地区或需要查询地区的省市县信息,广泛应用于注册、...

    js省市联动代码/新影网下拉列表框省市选择

    js省市联动代码/新影网下拉列表框省市选择

    js省市联动菜单 亲测可用

    总的来说,js省市联动菜单是网页开发中一种实用的交互组件,通过JavaScript的动态操作,可以为用户提供流畅的地理位置选择体验。无论你是在ASP或其他语言环境中,理解和实现这样的功能都是提升网站用户体验的重要一...

    javascript省市联动

    在"javascript省市联动"这个主题中,我们主要讨论的是如何利用JavaScript实现一种常见的前端功能——联动下拉框,即在选择国家后,根据所选国家自动更新省市区列表。 在开发网页时,为了提高用户体验,经常需要提供...

    qqJsAddress_省市联动_modified

    标签"js省市联动"明确了这个代码是用JavaScript实现的,意味着它依赖于浏览器的JavaScript引擎。JavaScript是一种广泛应用于Web开发的脚本语言,可以动态改变HTML元素和处理用户输入。在这个案例中,JavaScript用于...

    纯JS省市区联动 省市级联

    在IT行业中,"纯JS省市区联动 省市级联"是一个常见的前端开发需求,它涉及到JavaScript的基础知识、DOM操作、事件处理以及数据结构的运用。这个功能主要用于用户在选择省份时,根据所选省份动态加载对应的市和区的...

    省市联动js

    在IT行业中,"省市联动js"是一个常见的前端开发需求,主要应用于网页上的下拉选择框,用户选择一个省份后,城市列表会动态更新为对应省份的城市。这种功能能够提升用户体验,减少不必要的网络请求。本资源提供的...

    JS省市区联动代码

    ### JS省市区联动代码知识点详解 #### 一、概述 在Web开发中,省市区联动是一种常见的用户交互设计,主要用于地址选择场景。本篇文章将基于提供的JavaScript代码片段,详细介绍如何实现一个基本的省市区三级联动...

    jQuery_省市联动

    3. **JavaScript/jQuery代码**:`city.js` 文件包含了实现省市联动的JavaScript逻辑。这里可能定义了一个函数或者一系列的事件处理器,用于响应用户在省级选择框中的选择,并动态更新市级选择框的内容。这通常涉及到...

    asp.net 省市联动 省市齐全

    在ASP.NET开发中,省市联动是一项常见的功能,它主要用于网页上的地址选择,用户在选择省份后,下拉框会自动更新展示对应省份的城市列表。这种交互设计极大地提升了用户体验,尤其在处理大量的地区数据时。本资源...

Global site tag (gtag.js) - Google Analytics