开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Javascript在dropdown on onchange函数中显示/隐藏，需要记住表单提交后的值

在JavaScript中，可以使用onchange事件来监听下拉菜单的值改变。当下拉菜单的值发生改变时，可以通过该事件触发相应的函数来实现显示/隐藏的效果。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown onchange</title>
</head>
<body>
  <form>
    <label for="dropdown">选择一个选项：</label>
    <select id="dropdown" onchange="toggleVisibility()">
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
  </form>

  <div id="content1" style="display: none;">
    选项1被选中
  </div>
  <div id="content2" style="display: none;">
    选项2被选中
  </div>
  <div id="content3" style="display: none;">
    选项3被选中
  </div>

  <script>
    function toggleVisibility() {
      var dropdown = document.getElementById("dropdown");
      var selectedOption = dropdown.value;

      var content1 = document.getElementById("content1");
      var content2 = document.getElementById("content2");
      var content3 = document.getElementById("content3");

      if (selectedOption === "option1") {
        content1.style.display = "block";
        content2.style.display = "none";
        content3.style.display = "none";
      } else if (selectedOption === "option2") {
        content1.style.display = "none";
        content2.style.display = "block";
        content3.style.display = "none";
      } else if (selectedOption === "option3") {
        content1.style.display = "none";
        content2.style.display = "none";
        content3.style.display = "block";
      }
    }
  </script>
</body>
</html>

在上述代码中，我们通过onchange事件监听下拉菜单的值改变。当下拉菜单的值改变时，toggleVisibility函数会根据选中的值来显示/隐藏相应的内容。

对于表单提交后的值，可以在表单的提交事件中获取并保存。例如，可以在表单的submit事件中调用一个函数来获取选中的值，并进行相应的处理。

请注意，以上示例代码仅为演示目的，实际应用中可能需要根据具体需求进行修改和扩展。

关于JavaScript、表单提交、下拉菜单等相关知识，可以参考以下链接：

JavaScript教程：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide
表单提交：https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Your_first_form
下拉菜单：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select

腾讯云相关产品和产品介绍链接地址请参考腾讯云官方网站。

相关搜索:javascript在表单提交时显示隐藏的div 如何在表单提交后在输入字段中显示表单提交值如何在提交后将表单值显示在表中？如何在提交后在javascript中清除带有星号的表单？提交表单后，在html页面上的JSON文件中未显示数据值在google sheets中设置表单提交后的默认值在onchange事件中，如何通过JavaScript更改PrimeFaces SelectOneMenu的值和显示值？在提交按钮后在下拉列表中显示选定的值在html中显示在JavaScript函数中计算的值如何在react native中显示在提交Formik表单后发现错误的警报即使在提交表单后，也会在输入文本字段中显示相同的表单数据如何在表单提交后显示由glob函数生成的下拉菜单过滤器选定值？使用c#中的javascript/jquery函数在5秒后隐藏div和标签显示函数中的代码运行两次，一次在提交前，一次在提交后在POST Api中提交之前，获取并显示Div中的反应表单的FormArray值我需要在单击网页中的<a>标记时调用Javascript函数来显示和隐藏<div>内容在PHP中将变量传递到javascript函数中以使特定的div隐藏或显示？react日期选择器在表单提交后发送到后端时，会给出不需要的数据和日期值如何在sql server中获取最后插入的计算列的值，并在asp.net中提交表单后显示给用户。需要从2个不同的onclick函数中获取2个值(价格)，然后在表中显示总数

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

javascript表单提交的内容显示在表格中

实现三个文本域的内容提交之后显示在表格中，代码直接用文本文件运行，记得后缀改为.html 运行结果输入123，并点击提交按钮之后，数据就会显示在下面的表格中，有什么问题可以私聊我。...下面是代码 javascript"> function chk() { setTimeout("chk()",100); text1.innerHTML =...textarea name="t2"> 提交

7.5K4 0

codereview-s8

angular中遭遇的一个奇葩问题这个问题是我在本期开发排班器组件时遇到的一个很奇葩的问题，大体描述就是如上面github链接中描述的一样，就是当父组件的一个数据采用双向绑定时，并且需要已事件回调的方法更新其内部的某个属性值...但是在angular中遇到的奇葩现象现象就是，在父组件进行更新时，不知道是因为签名的缘故还是双向绑定的缘故，这个onChange都会先于子组件运行一次，那么问题来了，这个方法本来的调用时机是子组件更新后需要通知父组件进行相应更新时调用的...，然而现在子组件还未更新则先调用了该方法，那么回调函数中的参数必为空，除非onChange中加入了空校验代码，不然就会报错，其实加了空校验也没有什么意义，因为这个方法都会调用的，但是却不会进行任何的改变...限制上传文件的类型现在通过type为文件类型的input上传文件已经很普遍了，并且对于表单的校验，通常我们会在提交时进行，文件类型的表单也不例外，一般校验的内容有文件大小、文件类型（扩展名）等等。...因为只要用户想要上传别的类型的文件，通过切换文件对话框中的选取文件类型选项（比如显示全部文件类型），就可以选取别的类型的文件了，因此在提交时，也别忘了添加校验逻辑，防止因为上传了一些不支持的类型造成服务器内部错误

1.7K3 0

jquery的form表单提交

使用jQuery实现Form表单提交在Web开发中，表单提交是一个常见的操作，通过表单提交用户可以向服务器发送数据。...jQuery是一个流行的JavaScript库，可以简化处理JavaScript的操作，包括表单提交。在本篇博客中，我们将介绍如何使用jQuery来实现表单提交操作。...HTML表单首先，我们需要编写一个简单的HTML表单，用于向服务器提交数据。...在回调函数中，我们阻止了表单的默认提交行为，通过serialize()方法获取表单数据，并使用$.ajax()方法向服务器发送POST请求提交表单数据。...在success回调函数中处理提交成功的情况，而在error回调函数中处理提交失败的情况。通过以上示例，我们使用jQuery实现了一个简单的表单提交操作。

1741 0

04_使用JS完成功能

("user"); //获取输入表单对象,对象调用属性value属性就可以获取输入的值。...) 第三步：离焦事件绑定的函数中(获取用户输入的内容进行判断) 第四步：如果失败，在span位置给出错误提示信息，如果成功，让span内容为空。...部分代码： javascript"> var time; function init(){ //设置显示图片的定时操作 time = setInterval...time); //设置隐藏广告图片的定时操作 time = setInterval("hiddenAd()",3000); } //书写隐藏广告图片的函数 function hiddenAd...onsubmit：表单提交事件，有返回值，控制表单是否提交。

3.9K6 0

JS的常用操作

：对用户输入的数据进行判断第四步：数据合法(让表单提交) 第五步：数据非法(给出错误提示信息，不让表单提交) 问题：如何控制表单提交？...关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个返回值。...); 3.步骤分析第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值) 第二步：确定事件(onload)并为其绑定一个函数第三步：书写这个函数(设置一个显示图片的定时操作...) 第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block) 第五步：清除显示图片的定时操作() 第六步：书写隐藏图片的定时操作第七步：书写定时器中的函数(获取广告图片的位置并设置属性...onsubmit：表单提交事件，有返回值，控制表单是否提交。

8.1K1 0

JavaScript 语言入门

onclick事件 onblur 失去焦点事件 onchange 内容发生改变事件 onsubmit 表单提交事件 DOM 模型 Document 对象 Document 对象中的方法介绍节点的常用属性和方法...第一种方式只需要在 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码示例代码：的格式如下: function 函数名(形参列表){ 函数体 } 在 JavaScript 语言中，如何定义带有返回值的函数？...(); 结果：函数的 arguments 隐形参数（只在 function 函数内）就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。...onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作 onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

4.3K2 0

c#以POST方式模拟提交表单

这是我一年前写的一个用C#模拟以POST方式提交表单的代码，现在记录在下面，以免忘记咯。那时候刚学C#~忽忽。。很生疏。。...格式形如:user=uesr1&password=123 //下面开始执行数据的提交当提交没有错误将返回提交后的页面代码回来 string...，这里主要解决了用POST方法传递数据以模拟表单提交～还有就是避免了提交后返回到数据接收指定的页面～是个很好的方法！！...详见:http://www.cnblogs.com/anjou/archive/2006/12/25/602943.html (asp.net中webClient填充和提交表单的方法！) ...客户端触发事件后调用__doPostBack方法，将表示触发的控件源的eventTarget 和事件参数eventArgument分别付给两个隐藏域__EVENTTARGET和__EVENTARGUMENT

2.2K9 0

【Java 进阶篇】深入了解 Bootstrap 插件

您还可以更改选项卡的样式、内容和切换效果，以满足您的项目需求。 Bootstrap 表单验证表单验证是一个重要的前端功能，用于确保用户在提交表单时提供有效的数据。...这个基本的表单验证结构包含了文本输入字段和必填字段。如果用户尝试提交空值，浏览器将显示验证错误消息。自定义表单验证表单验证可以根据不同的需求进行自定义。...如果用户尝试提交不符合要求的数据，将显示自定义的错误消息。 Bootstrap 插件的 JavaScript 部分 Bootstrap 插件通常需要 JavaScript 来实现其交互功能。...在前面的示例中，我们使用了 data-toggle 和其他属性来定义插件的行为，但这些行为通常需要 JavaScript 的支持。...总结在本博客中，我们深入了解了 Bootstrap 插件，涵盖了轮播、模态框、下拉菜单、标签页和表单验证等常见插件。我们了解了它们的基本结构以及如何自定义它们以满足项目需求。

2773 0

前端实现input输入值实时变化

前言在web开发中，实时监控输入框（input）的值变化是一个常见的需求。这种需求通常出现在需要即时反馈用户输入的场景，比如搜索建议、字数统计等。...这种即时性使得oninput事件非常适合用于需要即时反馈的场景。onchange事件：与oninput不同，onchange事件在输入框的值改变后且失去焦点时才触发。...此外，onchange事件还可以用于非输入框元素，如元素。这种特性使得onchange事件更适合用于在用户完成输入后进行验证或提交的场景。...它通常与其他元素（如）和JavaScript代码一起使用，以实现复杂的表单处理和计算功能。...当输入框的值发生变化时，无论是因为键盘输入还是粘贴操作，都会触发这两个事件。在事件处理函数中，我们使用$(this).val()来获取输入框的当前值，并使用length属性来计算字符串的长度。

1.9K1 0

4 个 useState Hook 示例

编写 class Thing extends React.Component，将函数体复制到render()方法中，修复缩进，最后添加需要的状态。...通过在函数组件中调用useState，就会创建一个单独的状态。在类组件中，state 总是一个对象，可以在该对象上添加保存属性。...示例：使用 useState 显示/隐藏组件这个示例是一个组件，它显示一些文本，并在末尾显示一个read more链接，当单击链接时，它展开剩下的文本。...setItems 更新 state 不会将旧值“合并” - 它会使用新值覆盖state。这与this.setState在类中的工作方式不同。...还有一个处理提交的函数，其中，e.preventDefault来阻止页面刷新并打印出表单值。 updateField函数更有意思。

9842 0

轻松实用！纯Python快速开发在线交互调查问卷

web应用开发」的第九期，在之前三期的教程中，我们针对Dash中经常会用到的一些静态部件进行了较为详细的介绍，从而get到在Dash应用中组织静态内容的常用方法。...() 接下来我们来深入学习之前也使用过很多次的下拉选择部件Dropdown()，直接使用dash_core_components中的Dropdown()即可，它的主要属性&参数有： options用于设置我们的下拉选择部件中显示的选项...，传入列表，列表每个元素为字典，必填键有：'label'，用于设置对应选项显示的标签名称；'value'，对应当前选项的值，也是我们书写回调函数接受的输入；'disabled'，一般情况下不用设置，除非你想指定对应选项不可点选就设置为...3 动手编写在线调查问卷学习完今天的内容之后，我们就可以将它们应用到实际需求中，譬如我们现在需要向其他人发放一份调查问卷，其中涉及到不少输入文字或单选或多选内容，最后我们还需要将用户填写完成的表单内容保存到本地...else: return '您的信息未填写完整，请检查后提交！'

2.6K3 0

Web Speech API 之 Speech Synthesis

例子是一套表单控件，包括输入需要被合成的文本，设置音调、语速和说出文本时需要的语音。在输入文本之后，按下Enter/Return键使它播放。...让我们看看 JavaScript 在这个 app 中的强大表现。...最后，我们设置 `SpeechSynthesisUtterance.pitch`[22] 和`SpeechSynthesisUtterance.rate`[23] 属性值为对应范围表单元素中的值。...这主要是在 Firefox 操作系统上隐藏键盘 inputTxt.blur(); } 更新 pitch 和 rate 的显示数值代码的最后部分，在每次滑动条移动时，更新 pitch/rate 在...UI 中展示的值。

3311 0

BootStrap应用开发学习入门

-- 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。 content的值为default | black | black-translucent 。....sr-only #可以隐藏内联表单的标签 label标签 .control-label #控制label标签 label标签 .form-control #表单与其组件显示样式（常用输入框焦点....form-control-static #在一个水平表单内的表单标签后放置纯文本时 .help-block #灰色显示表单帮助文本标签 #验证状态 .has-warning、 .has-error...---使用 class .sr-only，您可以隐藏内联表单的标签。..." #需要下拉的嵌套: 您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。

17.5K2 0

React技巧之表单提交获取input值

中，通过表单提交获得input的值：在state变量中存储输入控件的值。...在form表单上设置onSubmit属性。在handleSubmit函数中访问输入控件的值。...为了获得表单提交时的输入值，我们只需访问state变量。如果你想在表单提交后清空控件值，可以设置state变量为空字符串。不受控控件类似地，可以使用不受控制的输入控件。...需要注意的是，当你改变ref的current属性的值时，不会导致重新渲染。每当用户提交表单时，不受控制的input的值会被打印。...reset 如果你想在表单提交后清除不受控制的input值，你可以使用reset()方法。 reset()方法还原表单元素的默认值。

1.6K2 0

HTML5 学习总结（二）——HTML5新增属性与表单元素

menuitem 属性： label：菜单项显示的名称 icon：在菜单项左侧显示的图标 onclick：点击菜单项触发的事件 1.2、contentEditable 规定是否可编辑元素的内容属性值...1.7、required必填属性约束表单元在提交前必须输入值。...1.10、autocomplete自动补全属性当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入。...2.1、表单结构更自由在HTML5中表单完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的id值，即可关联起来。显示值，需要使用javascript手动显示。 2.7、搜索输入类型此类型表示输入的将是一个搜索关键字,可显示一个搜索小图标。 ?

3.5K7 0

BootStrap应用开发学习入门

-- 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。 content的值为default | black | black-translucent 。....sr-only #可以隐藏内联表单的标签 label标签 .control-label #控制label标签 label标签 .form-control #表单与其组件显示样式（常用输入框焦点....form-control-static #在一个水平表单内的表单标签后放置纯文本时 .help-block #灰色显示表单帮助文本标签 #验证状态 .has-warning、 .has-error...---使用 class .sr-only，您可以隐藏内联表单的标签。..." #需要下拉的嵌套: 您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。

14.6K3 0

Web-第三天 JavaScript学习【悟空教程】

第1章案例：使用JS完成注册页面的校验 1.1 案例介绍用户在提交表单时，需要对用户的填写的数据进行校验。.../img/"+ ++num +".jpg"; } 第3章案例：定时弹广告 3.1 案例需求在平日浏览网页时，页面一打开5秒后显示广告，然后5秒后再隐藏广告。 ?...3.2 相关知识点 3.2.1 JavaScript定时器：setTimeout setTimeout() 在指定的毫秒数后调用函数或执行代码片段。...显示广告开始后，5秒后再次隐藏广告 3.4 案例实现步骤1：在页面中，添加广告位div，并设置页面加载事件在指定的毫秒数后调用函数或计算表达式。

3.4K1 0

JS总结

（隐藏）、inline换行（同行显示） b.制作层的显示/隐藏特效例如：改变按钮背景图显示，在页面中仿佛没有该对象一样。...5.基本的表单验证技术 5-1:为什么需要表单验证 a.避免信息无法更新或出现新错误 b.减轻服务器端的压力 5-2:表单验证的内容年、月、日、输入长度、中英文、特殊字符、是否为空、是否为数字、...未调用函数 6.表单验证的相关事件和辅助特效 6-1:制作图片代替按钮的提交效果例如：简略代码： onChange当选项发生变化时产生方法 add(new,old)将新的Option插入到old前面，如果old为空，直接插入到末尾属性 value 下拉列表框中被选选项的值、 options

1.4K4 0

表单验证和正则表达式

第一部分：form表单基础表单验证使用onblur还是onchange....JavaScript中的正则表达式提示：在JavaScript代码中，函数需要传入的参数是一个对象时，在函数主体body中一定需要对这个参数进行判断是否为null。...onchange事件不可以用于验证表单域的值是否为空。onblur事件适合触发数据验证。如何处理用户复制/粘贴文本到表单域中?...缺点是在mobile devices时，操作起来不是很方便，同时开放起来相对要复杂一些，需要做适配设备的显示分辨率。...表单域的所有验证都通过后，可以调用form.submit()方法将表单的值提交给服务器。

2K5 0

TDesign 更新周报（2022年5月第3周）

Table：修复多级表头 + 列配置综合示例中，列数量超出一定限制时报错 Transfer：修复列表数量变化时的页码展示问题 Input：修复 clear 触发后的 focus, 修复外部传入...中的适配问题，可参考案例 tdesign-vue-next-nuxt-starter Tabs：添加拖拽功能 Anchor：增加 demo 演示功能 Bug Fixes Table：修复在 ssr...：修复 slider 组件 onChange 事件 init 阶段被意外触发问题 Popup：增加zIndex api Popup：修复设置 destroyOnClose 后可能出现的异常抖动...Auto layout 4.0 自动布局全新升级布局更新绝对定位，减少使用空画板负间距，头像折叠更智能排列顺序，表单内容展开更智能填充内容超出省略显示 2....性能优化，减少隐藏元素，使用更流畅 Table：重构表格嵌套关系 Input：重构输入框嵌套关系 Menu：重构导航菜单嵌套关系 Dropdown：重构下拉菜单嵌套关系 2.

2.8K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭