下拉列表：二级联动菜单

Select对象的常用属性

options[]：返回所有option组成的一个数组；

name：名称

value：option的value的值

length：设置或读取option的个数

selectedIndex：当前选中的option的索引号

option对象的常用属性

text：指<option></option>中的文本

value：指option对象的value属性

index：指每个option对象的索引号

selected：当前option是否选中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>form表单之select操作</title>
  6. <script type="text/javascript">
  7. var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省","河南省"];
  8. var arr_city = [
  9.                 ["请选择城市/地区"],
  10.                 ["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],
  11.                 ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],
  12.                 ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
  13.                 ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
  14.                 ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
  15.                 ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'],
  16.                 ['郑州市']
  17.             ];
  18.  
  19. onload = function() {
  20.     var oForm = document.getElementById('form1');
  21.     var oProvince = oForm.children[0];
  22.     var oCity = oForm.children[1];
  23.  
  24.     // 添加点击 onchange 事件
  25.     oProvince.onchange = function() {
  26.         var _this = this.selectedIndex;
  27.         // 默认进来高度清零
  28.         oCity.length = 0;
  29.         // 指定城市下拉的高度
  30.         initCity(_this);
  31.     };
  32.  
  33.     // 初始化下拉列表
  34.     init();
  35.     // init select
  36.     function init(){
  37.         var index = 0;
  38.         // 指定下拉的高度
  39.         oProvince.length = arr_province.length;
  40.  
  41.         // 循环数组, 把内容写到下拉列表中去
  42.         for( var i = 0; i < arr_province.length; i++ ){
  43.             oProvince.options[i].text = arr_province[i];
  44.             oProvince.options[i].value = arr_province[i];
  45.         }
  46.  
  47.         // 指定默认索引号
  48.         oProvince.selectedIndex = index;
  49.         // 指定城市下拉的高度
  50.         initCity(index);
  51.     }
  52.  
  53.     // 城市下拉内容高度
  54.     function initCity(index){
  55.         // 指定城市下拉的高度
  56.         oCity.length = arr_city[index].length;
  57.  
  58.         // 循环数组, 把内容写到下拉列表中去
  59.         for( var i = 0; i < arr_city[index].length; i++ ){
  60.             oCity.options[i].text = arr_city[index][i];
  61.             oCity.options[i].value = arr_city[index][i];
  62.         }
  63.     }
  64.  
  65. };
  66.  
  67. </script>
  68. </head>
  69.  
  70. <body>
  71. <form id="form1">
  72.     省份: <select name="province" style="width:130px;"></select>
  73.  
  74.     城市: <select name="city" style="width:130px;"></select>
  75. </form>
  76. </body>
  77. </html>

　　

form表单select联动的更多相关文章

  1. form表单select的选项值选择

    html: <form action=""> <p>选择城市</p> <p> <select name="" ...

  2. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. select标签 禁止选择但又能通过序列化form表单传值到后台

    前言 项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化 ...

  4. select发生改变使用js提交form表单（get传值）

    form表单如下: <form id="my_form" method="get" action=""> <input t ...

  5. form表单提交，后台怎么获取select的值？后台直接获取即可，和input方式一样。

    form表单提交,后台怎么获取select的值? 后台直接获取即可,和后台获取input的值方式一样. form提交后,后台直接根据select的name获取即可,即getPara("XXX ...

  6. PHP表单生成器,快速生成现代化的form表单,快速上手

    form-builder PHP表单生成器,快速生成现代化的form表单.包含复选框.单选框.输入框.下拉选择框等元素以及省市区三级联动.时间选择.日期选择.颜色选择.树型.文件/图片上传等功能. 详 ...

  7. 前端笔记：React的form表单全部置空或者某个操作框置空的做法

    1.全部置空的做法,一般在弹出框关闭后,需要重置该form所有表单: this.props.form.resetFields(); 2.针对某个操作框置空的做法 例如,form表单里有一个部门和一个张 ...

  8. vue3 element-plus 配置json快速生成form表单组件，提升生产力近600%（已在公司使用，持续优化中）

    ️本文为博客园社区首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:gi ...

  9. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

随机推荐

  1. 【转】 探索UDP套接字编程

    UDP和TCP处于同一层网络模型中,也就是运输层,基于二者之上的应用有很多,常见的基于TCP的有HTTP.Telnet等,基于UDP有DNS.NFS.SNMP等.UDP是无连接,不可靠的数据协议服务, ...

  2. linux笔记：linux常用命令-帮助命令

    帮助命令:man(获得帮助信息) 帮助命令:help(获得shell内置命令的帮助信息)

  3. Mybatis学习（贰）

    一.类型别名typeAlias 1.在mapper文件中:实体作为resultType,多次书写在配置文件中,每次需要书写权限名(com.baizhi.yanxj.entity.User),代码比较繁 ...

  4. 浅谈线程池（上）：线程池的作用及CLR线程池

    原文地址:http://blog.zhaojie.me/2009/07/thread-pool-1-the-goal-and-the-clr-thread-pool.html 线程池是一个重要的概念. ...

  5. hdu----(4301)Divide Chocolate(状态打表)

    多校综合排名前25名的学校请发送邮件到HDUACM@QQ.COM,告知转账信息(支付宝或者卡号) Divide Chocolate Time Limit: 2000/1000 MS (Java/Oth ...

  6. Simple Data

    Git地址:https://github.com/markrendle/Simple.Data 来源:http://bbs.nfinal.com/read-13

  7. java中将一个字符数组赋值给另一个，两者同时变化

    java中将一个字符数组赋值给另一个,两者的变化怎么是同步的?怎么才能让他们独立开? 比如有一个int[][] a 已经存在值,现在定义int[][] b=a;之后改变a的值,为何b也跟着改变?怎么才 ...

  8. oAuth协议学习

    我们的项目需要为一个认证网站开发一套API,这些API可以提供给很多公司来调用,但是公司在调用之前,必须先做授权认证,由此接触到了oAuth协议. 以下内容来自网络整理 定义 OAUTH协议为用户资源 ...

  9. Objective-C：Foundation框架-结构体

    在Foundation中定义了很多常用结构体类型来简化我们的日常开发,这些结构体完全采用Objective-C定义,和我们自己定义的结构体没有任何区别,之所以由框架为我们提供完全是为了简化我们的开发. ...

  10. das,nas,san区别——大型数据中心会用NAS+SAN软硬结合思路

    DAS(Direct Access Storage-直接连接存储)是指将存储设备通过SCSI接口或光纤通道直接连接到一台计算机上.NAS(Network Attached Storage网络连接存储) ...