<body> <form name="aform" method="get" action="#"> 省份：<select id="province" name="province"></select> 城市：<select id="city" name="city"></select> </form> <script type="text/javascript"> var provinces = ["请选择省份", "北京市", "天津市", "上海市", "重庆市", "江苏省", "浙江 省", "江西省", "海南省"]; var citys = [ ["请选择城市"], ["北京市"], ["天津市"], ["上海市"], ["重庆市"], ["南京市"], ["杭州市"], ["南昌市", "九江市", "上饶市", "抚州市", "宜春市", "吉安市", "赣州市", "景德镇", "萍 乡市", "新余市", "鹰潭市"], ["海口市"] ]; var province = document.getElementById('province'); var city = document.getElementById('city'); for (var k in provinces) { var option = document.createElement('option'); option.innerText = provinces[k] province.append(option); } var index = 0; var c_option = document.createElement('option'); c_option.innerText = citys[index]; city.append(c_option); province.onchange = function() { city.options.length = 0; for (var k in citys[this.selectedIndex]) { var option = document.createElement('option'); option.innerText = citys[this.selectedIndex][k]; city.append(option); } } </script>

时间: 2023-08-27 17:17:49 浏览: 143
PPT

<FORM></FORM>标记-老师 第四章 超文本标记语言详细HTML

这是一个 HTML 页面，包含一个表单和一段 JavaScript 代码。表单中有两个下拉框，分别是省份和城市。JavaScript 代码实现了以下功能： 1. 定义了一个 provinces 数组和一个 citys 数组，分别存储各个省份和对应的城市。 2. 获取省份和城市两个下拉框的元素。 3. 循环遍历 provinces 数组，创建一个新的 option 元素，并将其添加到省份下拉框中。 4. 创建一个默认的城市 option 元素，并将其添加到城市下拉框中。 5. 当省份下拉框的值发生改变时，清空城市下拉框中的选项，并根据所选省份的索引值，遍历对应的 citys 数组，创建新的 option 元素，并将其添加到城市下拉框中。 通过这段代码，用户可以在省份下拉框中选择自己所在的省份，然后根据该省份所对应的城市数组，在城市下拉框中选择自己所在的城市。
阅读全文

相关推荐

-

HTML5 Form表单：<SELECT>标签详解及属性介绍

了解HTML的基本标签，如<head>、<body>、文本标签、图像标签、列表标签、表格<table>、文本超链接<a>、框架<frame>以及表单<form>，对于构建有效的网页至关重要。特别是表单元素如<SELECT>，它们是...
-

HTML5 Form表单：<SELECT>标签详解及属性

本文档主要介绍了HTML和HTML5中的FORM表单及其相关知识点，特别是关注于<SELECT>标签。<SELECT>元素在网页设计中扮演着关键角色，它允许用户创建单选或多选菜单，用户的选择会被提交到服务器作为参数列表。这个标签...
pdf

php简单防盗链验证实现方法 原创

提交信息：<input type="text" name="name" value="" /> <input type="submit" name="submit" value="提交" /> </form> </body> </html> 当用户点击提交按钮时，表单数据会被发送到check.php页面进行处理： ...
zip

polyfill-formaction:Polyfill for formaction HTML5 属性

当用户点击带有 formaction 的按钮时，表单会向该属性指定的 URL 提交数据，而不是向 <form> 标签中的 action 属性所指的 URL 提交。这为开发者提供了更大的灵活性，可以在同一表单中实现不同提交逻辑。 2. *...
zip

t.com:“ t.com-t是字母表中最神圣的字母。t咒语指出t>全部t =是t =生命。t永生。”

<label for="comment">写下你的想法:</label><br> <textarea id="comment" name="comment" rows="4" cols="50"></textarea><br> <input type="submit" value="提交"> </form> 除此之外，“t”也可能出现在...
pdf

php中$_POST与php://input的区别实例分析

<form action="welcome.php" method="post"> Enter your name: <input type="text" name="name" /> Enter your age: <input type="text" name="age" /> <input type="submit" /> </form> 对应的PHP接收脚本...
zip

权威实用jsp自定义标签demo<select,checkbox,radio>

<name>select</name> <tag-class>com.example.DiySelectTag</tag-class> <body-content>empty</body-content> ... </tag> <tag> <name>checkbox</name> <tag-class>com.example.DiyCheckboxTag</tag-class> ...
zip

survey-form:调查表练习

4. **表单属性**：<form>元素有一些重要的属性，如action定义了提交表单后服务器处理数据的URL，method定义了发送数据的方式，通常是"GET"或"POST"。 5. **按钮和提交**：<button>元素用于创建可点击的按钮...
zip

login-form:透明的登录表格

<form> 标签定义了表单，action 属性指定了处理表单数据的服务器端脚本，method 属性指定了提交方式（通常是 "POST"，以安全地传输密码等敏感信息）。 接下来，CSS（Cascading Style Sheets）用于美化和定制...
pdf

thinkPHP5.1框架路由::get、post请求简单用法示例

<form action="type" method="post"> <p><input type="text" name="name" id=""></p> <p><input type="submit" value="提交"></p> </form> </body> </html> 这个HTML表单会向/type发送POST请求，携带名为...
zip

flask-form:使用Flask的网络应用示例

<form method="post" action="/"> {{ form.csrf_token }} {{ form.name.label }} {{ form.name() }} {{ form.submit() }} </form> </body> </html> 在这个模板中，我们使用了 Flask-WTF 自动生成的表单...
zip

signup_form_htmlcss:学习HTML CSS Day＃1

<label for="email">电子邮件:</label><br> <input type="email" id="email" name="email"><br> <input type="submit" value="注册"> </form> 接下来，CSS是美化HTML元素并控制其显示方式的关键工具。通过...
pdf

django处理select下拉表单实例(从model到前端到post到form)

<form method="post" action=""> <select name="sel_value"> {% for key, value in select_form.SELVALUE %} <option value="{{ value }}">{{ key }}</option> {% endfor %} </select> <input type="submit" ...
zip

angular-sofa-name:角沙发名称元素

<angular-sofa-name sofa-id="{{currentSofa.id}}" sofa-name="{{currentSofa.name}}"></angular-sofa-name> <script> var app = angular.module('yourApp', ['angular-sofa-name']); app.controller('MyCtrl',...
rar

html页面模式get/post请求

<form action="your-api-url" method="post"> <!-- 输入字段 --> <input type="text" name="key1" value="value1"> <input type="text" name="key2" value="value2"> <!-- 提交按钮 --> <button type="submit">...
zip

Survey-Form:该项目是在FreeCodeCamp中完成的

<head>部分包含元数据，如字符集、页面标题等，而<body>则包含可见的页面内容。 2. **标题标签**：使用<h1>到<h6>标签创建不同级别的标题，<h1>是最主要的标题，<h6>是最小的标题。在"Survey-Form"中，...
pdf

PHP通过get方法获得form表单数据方法总结

<form action="test.php" method="get"> 名字: <input type="text" name="fname"><br> 年龄: <input type="text" name="age"><br> <input type="submit" value="提交"> </form> </body> </html> 在这个表单...
zip

Registration-Form:使用 Node.js 和 MongoDB 的注册表格

<form action="/register" method="POST"> <label for="name">姓名：</label> <input type="text" id="name" name="name" required><br> <label for="email">邮箱：</label> <input type="email" id="email" ...
-

C# WebApi 接口传参全解析：get/post/put/delete

在客户端，如JavaScript代码中，可以使用AJAX发送带有id=1和name="Jim"的数据，如data={id:1, name:"Jim", bir:"1988-09-11"}，服务器端通过解析URL查询字符串来获取这些参数。 2. **实体作为参数**：对于更...

最新推荐

recommend-type

STM32F103单片机连接EC800-4G模块采集GNSS定位数据和多组传感器数据上传到ONENET云平台并接收控制指令.zip

1、嵌入式物联网单片机项目开发例程，简单、方便、好用，节省开发时间。 2、代码使用KEIL 标准库开发，当前在STM32F103运行，如果是STM32F103其他型号芯片，依然适用，请自行更改KEIL芯片型号以及FLASH容量即可。 3、软件下载时，请注意keil选择项是jlink还是stlink。 4、有偿指导v：wulianjishu666; 5、如果接入其他传感器，请查看账号发布的其他资料。 6、单片机与模块的接线，在代码当中均有定义，请自行对照。 7、若硬件有差异，请根据自身情况调整代码，程序仅供参考学习。 8、代码有注释说明，请耐心阅读。
recommend-type

前端分析-2023071100789

前端分析-2023071100789
recommend-type

基于python的学生考勤管理系统源代码（完整前后端+mysql+说明文档）.zip

项目均经过测试，可正常运行！ 环境说明： 开发语言：python python版本：3.6.8 框架：django 数据库：mysql 5.7/8 数据库工具：navicat 开发软件：pycharm
recommend-type

基于前端期末大作业源码+文档+高分项目+全部资料.zip

【资源说明】 基于前端期末大作业源码+文档+高分项目+全部资料.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
recommend-type

抽象python圣诞树代码动态3d

python圣诞树代码动态3d
recommend-type

CoreOS部署神器：configdrive_creator脚本详解

资源摘要信息:"配置驱动器（cloud-config）生成器是一个用于在部署CoreOS系统时，通过编写用户自定义项的脚本工具。这个脚本的核心功能是生成包含cloud-config文件的configdrive.iso映像文件，使得用户可以在此过程中自定义CoreOS的配置。脚本提供了一个简单的用法，允许用户通过复制、编辑和执行脚本的方式生成配置驱动器。此外，该项目还接受社区贡献，包括创建新的功能分支、提交更改以及将更改推送到远程仓库的详细说明。" 知识点： 1. CoreOS部署：CoreOS是一个轻量级、容器优化的操作系统，专门为了大规模服务器部署和集群管理而设计。它提供了一套基于Docker的解决方案来管理应用程序的容器化。 2. cloud-config：cloud-config是一种YAML格式的数据描述文件，它允许用户指定云环境中的系统配置。在CoreOS的部署过程中，cloud-config文件可以用于定制系统的启动过程，包括用户管理、系统服务管理、网络配置、文件系统挂载等。 3. 配置驱动器（ConfigDrive）：这是云基础设施中使用的一种元数据服务，它允许虚拟机实例在启动时通过一个预先配置的ISO文件读取自定义的数据。对于CoreOS来说，这意味着可以在启动时应用cloud-config文件，实现自动化配置。 4. Bash脚本：configdrive_creator.sh是一个Bash脚本，它通过命令行界面接收输入，执行系统级任务。在本例中，脚本的目的是创建一个包含cloud-config的configdrive.iso文件，方便用户在CoreOS部署时使用。 5. 配置编辑：脚本中提到了用户需要编辑user_data文件以满足自己的部署需求。user_data.example文件提供了一个cloud-config的模板，用户可以根据实际需要对其中的内容进行修改。 6. 权限设置：在执行Bash脚本之前，需要赋予其执行权限。命令chmod +x configdrive_creator.sh即是赋予该脚本执行权限的操作。 7. 文件系统操作：生成的configdrive.iso文件将作为虚拟机的配置驱动器挂载使用。用户需要将生成的iso文件挂载到一个虚拟驱动器上，以便在CoreOS启动时读取其中的cloud-config内容。 8. 版本控制系统：脚本的贡献部分提到了Git的使用，Git是一个开源的分布式版本控制系统，用于跟踪源代码变更，并且能够高效地管理项目的历史记录。贡献者在提交更改之前，需要创建功能分支，并在完成后将更改推送到远程仓库。 9. 社区贡献：鼓励用户对项目做出贡献，不仅可以通过提问题、报告bug来帮助改进项目，还可以通过创建功能分支并提交代码贡献自己的新功能。这是一个开源项目典型的协作方式，旨在通过社区共同开发和维护。 在使用configdrive_creator脚本进行CoreOS配置时，用户应当具备一定的Linux操作知识、对cloud-config文件格式有所了解，并且熟悉Bash脚本的编写和执行。此外，需要了解如何使用Git进行版本控制和代码贡献，以便能够参与到项目的进一步开发中。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

【在线考试系统设计秘籍】：掌握文档与UML图的关键步骤

![在线考试系统文档以及其用例图、模块图、时序图、实体类图](http://bm.hnzyzgpx.com/upload/info/image/20181102/20181102114234_9843.jpg) # 摘要 在线考试系统是一个集成了多种技术的复杂应用，它满足了教育和培训领域对于远程评估的需求。本文首先进行了需求分析，确保系统能够符合教育机构和学生的具体需要。接着，重点介绍了系统的功能设计，包括用户认证、角色权限管理、题库构建、随机抽题算法、自动评分及成绩反馈机制。此外，本文也探讨了界面设计原则、前端实现技术以及用户测试，以提升用户体验。数据库设计部分包括选型、表结构设计、安全性
recommend-type

如何在Verilog中实现一个参数化模块，并解释其在模块化设计中的作用与优势？

在Verilog中实现参数化模块是一个高级话题，这对于设计复用和模块化编程至关重要。参数化模块允许设计师在不同实例之间灵活调整参数，而无需对模块的源代码进行修改。这种设计方法是硬件描述语言（HDL）的精髓，能够显著提高设计的灵活性和可维护性。要创建一个参数化模块，首先需要在模块定义时使用`parameter`关键字来声明一个或多个参数。例如，创建一个参数化宽度的寄存器模块，可以这样定义： 参考资源链接：[Verilog经典教程：从入门到高级设计](https://wenku.csdn.net/doc/4o3wyv4nxd?spm=1055.2569.3001.10343) ``` modu
recommend-type

探索CCR-Studio.github.io: JavaScript的前沿实践平台

资源摘要信息:"CCR-Studio.github.io" CCR-Studio.github.io 是一个指向GitHub平台上的CCR-Studio用户所创建的在线项目或页面的链接。GitHub是一个由程序员和开发人员广泛使用的代码托管和版本控制平台，提供了分布式版本控制和源代码管理功能。CCR-Studio很可能是该项目或页面的负责团队或个人的名称，而.github.io则是GitHub提供的一个特殊域名格式，用于托管静态网站和博客。使用.github.io作为域名的仓库在GitHub Pages上被直接识别为网站服务，这意味着CCR-Studio可以使用这个仓库来托管一个基于Web的项目，如个人博客、项目展示页或其他类型的网站。 在描述中，同样提供的是CCR-Studio.github.io的信息，但没有更多的描述性内容。不过，由于它被标记为"JavaScript"，我们可以推测该网站或项目可能主要涉及JavaScript技术。JavaScript是一种广泛使用的高级编程语言，它是Web开发的核心技术之一，经常用于网页的前端开发中，提供了网页与用户的交云动性和动态内容。如果CCR-Studio.github.io确实与JavaScript相关联，它可能是一个演示项目、框架、库或与JavaScript编程实践有关的教育内容。 在提供的压缩包子文件的文件名称列表中，只有一个条目："CCR-Studio.github.io-main"。这个文件名暗示了这是一个主仓库的压缩版本，其中包含了一个名为"main"的主分支或主文件夹。在Git版本控制中，主分支通常代表了项目最新的开发状态，开发者在此分支上工作并不断集成新功能和修复。"main"分支（也被称为"master"分支，在Git的新版本中推荐使用"main"作为默认主分支名称）是项目的主干，所有其他分支往往都会合并回这个分支，保证了项目的稳定性和向前推进。 在IT行业中，"CCR-Studio.github.io-main"可能是一个版本控制仓库的快照，包含项目源代码、配置文件、资源文件、依赖管理文件等。对于个人开发者或团队而言，这种压缩包能够帮助他们管理项目版本，快速部署网站，以及向其他开发者分发代码。它也可能是用于备份目的，确保项目的源代码和相关资源能够被安全地存储和转移。在Git仓库中，通常可以使用如git archive命令来创建当前分支的压缩包。 总体而言，CCR-Studio.github.io资源表明了一个可能以JavaScript为主题的技术项目或者展示页面，它在GitHub上托管并提供相关资源的存档压缩包。这种项目在Web开发社区中很常见，经常被用来展示个人或团队的开发能力，以及作为开源项目和代码学习的平台。