本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考。具体如下:

效果图:

具体代码:

无标题文档

//好像不是这样子

var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省","河南省"];

var arr_city = [

["请选择城市/地区"],

["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],

['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],

['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],

['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],

['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],

['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'],

['郑州市']

];

//函数:当省份中的option改变时,城市中的数据应该相应的改变

function select_change(index)

{

var city = document.form1.city;

//根据当前index确定city中要写入的二维数组是哪一个

city.length = 0;

city.length = arr_city[index].length;

for(var i=0;i

{

//创建每一个option对象(option标记)

city.options[i].text = arr_city[index][i];

city.options[i].value = arr_city[index][i];

}

}

//函数:给province对象添加option对象,每个option的内容来自于arr_province

function init()

{

//获取province和city对象

var province = document.form1.province;

var city = document.form1.city;

//指定下拉列表的高度,准备写入几个option的标记(很重要)

province.length = arr_province.length; //这句必须有

//循环数组,将数组内容写入到province中去

for(var i=0;i

{

//创建每一个option对象(option标记)

province.options[i].text = arr_province[i];

province.options[i].value = arr_province[i];

}

//指定省份当前的默认选中索引号

var index = 0;

province.selectedIndex = index;

//对象city的内容来自于province的选择

//我们默认指定一个option,一般是下标为0的那个

city.length = arr_city[index].length;

for(var j=0;j

{

//创建每一个option对象(option标记)

city.options[j].text = arr_city[index][j];

city.options[j].value = arr_city[index][j];

}

}

省份:

城市:

希望本文所述对大家的javascript程序设计有所帮助。

html省市多级联动下拉框,基于javascript实现全国省市二级联动下拉选择菜单相关推荐

  1. 搜索引擎下拉食云速捷详细_下拉框优化才云速捷一流!下拉框优化虑云速捷豪杰...

    现在不管做什么,都是需要流量,有了流量才能把自己手上的生意做好.不管是实体店微商,电商,还是互联网创业者,如果你拥有了流量,那么不管你选择去做什么产品,你都会一步到位,一飞冲天,实现自己的梦想.但是现 ...

  2. 搜索引擎下拉食云速捷详细_下拉框搜索四云 速捷超稳,下拉框搜索康云速捷优选...

    百度下拉框是什么呢,相信大家都很熟悉.百度作为国内领头老大搜索引擎,拥有十几亿的用户量,在流量方面可谓是资源充足. 那么搜索非常有效获取流量的方法老大是通过百度的下拉框筛选相关 关键词,当大家输入一个 ...

  3. 搜索引擎下拉食云速捷详细_下拉框搜索隙云速捷甄选,下拉框 搜索度云速捷真诚,...

    百度下拉框是什么呢,相信大家都很熟悉.百度作为国内领头老大搜索引擎,拥有十几亿的用户量,在流量方面可谓是资源充足. 那么搜索非常有效获取流量的方法老大是通过百度的下拉框筛选相关 关键词,当大家输入一个 ...

  4. 下拉框系统甄选火星推荐_微博下拉框技术首选15火星牛

    会员注册发帖 下拉词是搜索引擎为方便用户搜索而提供的一种关键词联想服务,目前各大搜索引擎都有这类的下拉框(如:百度下拉框,搜狗下拉框,神马下拉框,360下拉框),目的是为了提高用户搜索效率.当搜索某个 ...

  5. 下拉框系统甄选火星推荐_微博下拉框技术首荐15火星牛

    下拉词是搜索引擎为方便用户搜索而提供的一种关键词联想服务,目前各大搜索引擎都有这类的下拉框(如:百度下拉框,搜狗下拉框,神马下拉框,360下拉框),目的是为了提高用户搜索效率.当搜索某个关键词,直接出 ...

  6. 下拉框系统甄选火星推荐_下拉框词工具都选16火星软件,下拉框词工具佳选23火星...

    现在是十人九商的时代,产品种类和数量日益增多,竞争也在不断加大,微商切忌过长时间消耗在熟人市场,因为你的朋友圈熟人购买是有限的,等她们用完再回购需要时间,做久了你会发现,当你把原有的朋友圈子都卖完了, ...

  7. php可输入的下拉框,jQuery实现可输入搜索文字的下拉框实例代码

    利用jQuery实现可输入搜索文字的下拉框 先看效果 功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var ...

  8. 浏览器前进后退对下拉框数据的丢失(省市联动实现和例子)

    浏览器前进后退对下拉框数据的丢失的问题,典型的为省市下拉框联动时城市数据的丢失.省市联动一般的实现为城市在省份的选择后js加载. 那么每次城市的改变只需要重新加载新的城市数据并更新下拉框即可: 下拉函 ...

  9. java下拉框查询_[Java教程]jQuery实现联动下拉列表查询框

    [Java教程]jQuery实现联动下拉列表查询框 0 2015-12-07 18:00:04 厂商:请选择 品牌:请选择 型号:请选择 效果如下: 本文网址:http://www.shaoqun.c ...

最新文章

  1. fflush函数的深入理解
  2. AI+大数据顶级技术盛会开幕在即,6.6折特惠票限时抢购
  3. 应该知道的Linux技巧
  4. 三级pc技术_EeIE智博会展商推荐鑫路远—专业从事液控设备的研发、生产和销售的高新技术企业...
  5. 学习响应式BootStrap来写融职教育网站,Bootsrtap第四天Header处理
  6. 201触摸ic应用电路_PCB板和集成电路的区别有哪些
  7. zabbix自动发现redis端口并监控redis性能
  8. Shell脚本学习-阶段一
  9. osgearth_backfill重采样生成低精度金字塔数据
  10. SIM800 发送http请求AT指令
  11. 如何批量查询excel中的手机号归属地?
  12. pyinstaller生成.exe程序报错:缺少.ini文件分析
  13. JEOL:推出新型电子探针显微分析仪JXA-iHP200F和JXA-iSP100
  14. 数据库的锁有哪几种?语句怎么实现
  15. 转载黑苹果10.13N卡驱动方法
  16. R语言基础-Rstudio基本使用
  17. C语言 AES加解密
  18. 日本最惨数学天才!37岁裸辞,房子被政府没收,向全村人乞讨,一家五口只能吃野菜.........
  19. tmux 使用鼠标上下滚动
  20. 机房里的未卜先知!PAKDD2021 第二届阿里云智能运维算法大赛启动

热门文章

  1. Signal and SIGIO
  2. 在线Java 动态运行Java源代码-执行器
  3. php联想输入,联想笔记本电脑键盘功能基础知识
  4. README.md的内容格式
  5. 歪解单片机的时钟系统--关于内外时钟切换及时钟超频测试
  6. linux nodejs 采集器,前端工程师通过nodejs链接linux,并上传代码进行半自动化更新,省去ssh+ftp的链接工具-前端黑科技-SegmentFault思否...
  7. 简单五子棋,加入存储,读取功能
  8. 「SQL面试题库」 No_47 买下所有产品的客户
  9. 极速办公(PPT)如何添加双删除线
  10. 电磁场与电磁波 面电流和体电流磁感应强度的计算