动态Js级联(地区级联)

最新推荐文章于 2022-01-05 17:27:40 发布
最新推荐文章于 2022-01-05 17:27:40 发布
阅读量2.2k 收藏
点赞数
文章标签： null xhtml html javascript border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanglieguo/article/details/4490083
版权

<!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 bgcolor="#FFFFFF">
<html>  

<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].value = itemArray[i][0];

                        }

                }

        }

   } 

 

</script>

  <body>

   <table width="99%" border="0" align="center" style="border-bottom:1px solid #cccccc">

      <tr>

       <td width="10"><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>

       </td>

 <td  width="10"><select name="townid" id="townid">

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

   </select>

 </td>     

      </tr>    

   </table>

  </body>

</html>  

 

zhanglieguo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
html5地区级联选择,【JS】vue+vant移动端地区级联选择组件
weixin_39876645的博客
06-03 1457
首页专栏javascript文章详情0vue+vant移动端地区级联选择组件quanta发布于 今天 08:25写在开头：项目的框架是vue+vant，业务需求一个级联的地区选择，写完才发现vant本身也有这组件….后来看vant本身用的逻辑跟我不太一样，觉得还有点思考价值那就发上来当做实现记录吧~总体思路(select与tabs独立)：列表选择(select)1)获取当前tabs的长度 -&gt...
ASP动态级联菜单实现代码
10-30
总结来说，ASP动态级联菜单的实现涉及了服务器端的ASP脚本与客户端的JavaScript协作，通过数据库查询获取数据，并利用事件监听用户操作，动态更新页面内容。这种技术提高了用户体验，使网站更加互动和智能化。
地区的级联选择器的递归
bbt953的博客
01-05 707
let mapObj = { text: 'name', value: 'id', parentId: 'parent_id', children: 'children' }; //级联要求的数据格式 属性值是调接口得来的数据对应字段，此处不调接口，写死模拟一下 let data = [ { name: '江苏省', id: 1, parent_id: 0, children: [ { name: '南京市
THINKPHP官方推荐第三方插件库
09-13 3626
数据库 数据库迁移工具topthink/think-migration——https://github.com/top-think/think-migration ORM类库topthink/think-orm——https://github.com/top-think/think-orm Oracle驱动topthink/think-oracle——https://github.com/top-think/think-oracle MongoDb扩展topthink/...
城市与地区级联选择框的使用
weixin_48837605的博客
09-03 873
效果图： 准备工作: 1.需要包含所有城市有所有地区大的数组js文件 2. 定义城市的组件,可以设置为全局组件 3.就是在组件中使用啦 @/city.js文件 const datas = [ { city: '北京市', area: [ '东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区',
地区三级联动最新版，数据最全
潘敬
02-10 3904
地区数据总共：4094条，全国都全 源码下载地址：http://pan.baidu.com/s/1hq5fNTy 界面截图： 常用的方法都提供了，大家可根据需要去适当的修改源码，源码没有加密和压缩。 源码中有example，采用的是Jquery来作为对象选择器。 用的时候都是需要new对象，没有扩展Jquery 有个属性：basePath 可以不写，写了的话就会自动在这个路
asp动态级联菜单代码
10-30
asp动态级联菜单代码 ...本例中使用了ASP技术、数据库交互、Recordset对象、JavaScript技术、DOM、事件处理、数据绑定、级联菜单、表单处理和JavaScript数组等技术，实现了一个动态级联菜单的功能。
地区动态级联
04-09
【标签】：“源码”表明这篇博客可能包含实现地区动态级联的代码示例，可能是用某种编程语言（如JavaScript、Java、Python等）编写的。“工具”可能指代开发者可能需要用到的一些库、框架或者辅助工具，例如jQuery、...
js 级联选择地区
12-03
在JavaScript和jQuery的世界里，级联选择是一种常见的交互设计，...总之，"js 级联选择地区"是一种实用的前端交互设计，结合JavaScript和jQuery可以轻松实现。理解其工作原理和实现方法对于提升网页交互体验至关重要。
JavaScript实现级联菜单的方法
10-24
主要介绍了JavaScript实现级联菜单的方法,涉及javascript页面元素操作的相关技巧,需要的朋友可以参考下
省市区级联JS文件
10-05
用于作为省市区选择器中的数据来源。需要在js文件中引入本脚本。本JS文件可实现获取呢到省市区的完整数据。方便实用。
js省市级联
08-10
基于JQ开发的省市级联控件，方便初学者使用，项目组中使用过，分享一下。
全国地区省市县级联关系表
05-24
包含、全国、华中、华南等7大区、省、市、县、层级/级联关系
php首创 四级联动，三级联动
10-23
不说别的 好不好自己下载，绝对首创.....
全js实现省市县联动
04-22
Province City Area Selector 省、市、地区联动选择JS封装类
js 地区级联信息数据
zhuxineli的专栏
04-19 1016
var PRO =[‘安徽’,’澳门’,’北京’,’福建’,’甘肃’,’广东’,’广西’,’贵州’,’海南’,’河北’,’河南’,’黑龙江’,’湖北’,’湖南’,’吉林’,’江苏’,’江西’,’辽宁’,’内蒙古’,’宁夏’,’青海’,’山东’,’山西’,’陕西’,’上海’,’四川’,’台湾’,’天津’,’西藏’,’香港’,’新疆’,’云南’,’浙江’,’重庆’,’海外’]; /** 市级数据 **
现成的省市区三级地区级联json数据
03-06
现成的省市区三级地区级联json数据，json代码格式工整简明，便于开发者阅读和使用，开箱即用！ 现成的省市区三级地区级联json数据，json代码格式工整简明，便于开发者阅读和使用，开箱即用！
js地区级联
09-21
js 地区级联 省市两级级联 js 地区级联 省市两级级联 js 地区级联 省市两级级联 js 地区级联 省市两级级联 js 地区级联 省市两级级联 js 地区级联 省市两级级联 js 地区级联 省市两级级联
thinkphp+ajax省、市、县、乡、村5级下拉联动代码
09-24
thinkphp+ajax省、市、县、乡、村5级下拉联动代码
vue动态级联选择器
最新发布
08-16
Vue动态级联选择器是一种常见的前端交互组件，它可以根据用户的选择动态加载相关数据并实现级联效果。在Vue中，可以使用一些库或组件来实现这样的功能，比如element-ui、vue-cascader等。 下面是一个使用element-ui...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值