下拉列表：二级联动菜单

Select对象的常用属性

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

name：名称

value：option的value的值

length：设置或读取option的个数

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

option对象的常用属性

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

value：指option对象的value属性

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

selected：当前option是否选中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>form表单之select操作</title>

<script type="text/javascript">

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

var arr_city = [

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

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

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

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

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

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

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

                ['郑州市']

            ];

onload = function() {

    var oForm = document.getElementById('form1');

    var oProvince = oForm.children[0];

    var oCity = oForm.children[1];

    // 添加点击 onchange 事件

    oProvince.onchange = function() {

        var _this = this.selectedIndex;

        // 默认进来高度清零

        oCity.length = 0;

        // 指定城市下拉的高度

        initCity(_this);

    };

    // 初始化下拉列表

    init();

    // init select

    function init(){

        var index = 0;

        // 指定下拉的高度

        oProvince.length = arr_province.length;

        // 循环数组, 把内容写到下拉列表中去

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

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

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

        }

        // 指定默认索引号

        oProvince.selectedIndex = index;

        // 指定城市下拉的高度

        initCity(index);

    }

    // 城市下拉内容高度

    function initCity(index){

        // 指定城市下拉的高度

        oCity.length = arr_city[index].length;

        // 循环数组, 把内容写到下拉列表中去

        for( var i = 0; i < arr_city[index].length; i++ ){

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

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

        }

    }

};

</script>

</head>

<body>

<form id="form1">

    省份: <select name="province" style="width:130px;"></select>

    城市: <select name="city" style="width:130px;"></select>

</form>

</body>

</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. phonegap插件加载与使用

    有朋友问能不能在CanTK和AppBuilder开发的APP里发送UDP数据,HTML5里只能用HTTPS/HTTP/WebSocket几种通讯方式,要使用UDP需要通过phonegap打包成APK等 ...

  2. 【软件使用】TortoiseSVN版本管理软件使用简单说明

    TortoiseSVN版本管理软件使用简单说明 很多时候在写一个小的项目不想使用github等工具,只想简单在本地搭建一个版本管理器.那么TortoiseSVN就非常适合. 第一步:下载Tortois ...

  3. spring来了-02-HelloWorld

    spring的各个版本说明: 在3.0以下的版本,源码有spring中相关的所有包[spring功能+依赖包],如:2.5版本 在3.0以上的版本,源码中只有spring的核心功能包[没有依赖包],如 ...

  4. 5个开发人员不应该错过的最好跨平台PHP编辑器

    IDE(集成开发环境)或换句话说PHP编辑器是开发人员在构建移动或Web应用必不可少的工具.在这篇文章中,我们将讨论有关PHP编辑器并分享5个最好的跨平台的PHP编辑器. 1. NetBeans Ne ...

  5. C/C++源代码到可执行程序的过程详解

    编译,编译程序读取源程序(字符流),对之进行词法和语法的分析,将高级语言指令转换为功能等效的汇编代码,再由汇编程序转换为机器语言,并且按照操作系统对可执行文件格式的要求链接生成可执行程序. 源代码-- ...

  6. 149. Max Points on a Line *HARD* 求点集中在一条直线上的最多点数

    Given n points on a 2D plane, find the maximum number of points that lie on the same straight line. ...

  7. webservice方法内用了session，asp.net调用时注意问题

    可搜索相关:ASP.NET WebService 中使用 ASP.NET_SessionId 当前问题是:我们写了WebService给客户调用,第一个方法是登陆,传入用户名和密码,成功后在Webse ...

  8. spring使用jackson返回object报错:Handler execution resulted in exception: Could not find acceptable representation

    问题:在springmvc中添加Jackson jar包返回Object类型,处理器方法的produces属性不写,默认根据类型,但如果指定了(错误原因)produces = "text/h ...

  9. SpringMvc之handler深入AbstractControllerhe和MultiActionController和内部资源视图解析器

    AbstractControllerhe 若处理器继承自AbstractController类,那么该控制器就具有了一些新功能.因为AbstractController类还继承自一个父类WebCont ...

  10. 实验一 Java开发环境的熟悉境的熟悉

    - 运行结果: (一)命令行下Java程序开发 (二)Eclipse下Java程序开发.调试 设置断点和单步运行 单步运行:Step Into(快捷捷F5)和Step Over(快捷捷F5) 使程序直 ...