js实现表单联动

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量3.2k 收藏 2
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/konglei1996/article/details/51089274
版权

最近做的一个小demo，原生js实现表单联动。演示地址：表单联动
我的github地址：源码地址，友情Star一下，谢谢

实现效果如图：
这里写图片描述
这里我只记录一下核心代码思想。

首先页面代码如下：
这里写图片描述

声明一个变量存放二级表单的内容
这里写图片描述

下面就是实现联动效果的核心代码
这里写图片描述
其中说下selectedIndex.属性可设置或返回下拉列表中被选选项的索引号。在这里，area是一级表单，如果选中该表单的某一个选择项，那么对应的就要是二级表单内容。最后通过遍历，依次把对应二级表单内容添加进页面。

「已注销」
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之表单验证
m0_67331668的博客
03-07 810
兄弟们，我又又又来啦，今天给大家带来的是表单验证 目录 一、简单验证 二、 正则验证 《1》什么是正则验证？ 《2》正则的规矩 《3》正则的注意事项 《4》正则的使用 三、二级联动 什么是二级联动？ 一、简单验证 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表单验证</title> <s...
JS——表单操作及select多级联动下拉列表
偷只猫来养的博客
07-05 3070
JS——表单操作 一、获取表单元素 1、获取页面所有表单元素：document.forms 使用document.forms返回的是一个HTMLCollection数组，数组的元素是form，有多少个form就有多少个元素，每个元素是一个类数组，其中包含了当前表单中的所有元素及其对应的属性。 <form> <input type="text" /> <input type="password" /> <input t
经典JS三级联动表单
04-20
JS三级联动表单 <!-- var arrText = new Array(5); var arrValue = new Array(arrText.length); function objSetOption(select1, select2, select3) { this.select1 = select1; this.select2 = select2; this.select3 = select3; } arrText[0]= new objSetOption("选择1:", "选择2_1:,选择2_2:", "选择3_1:,选择3_2:"); arrText[1] = new objSetOption("论文:1", "语文:1,数学:2,英语:3", "初中:2,高中:3"); arrText[2] = new objSetOption("例题:2", "显示b2_1:值b2_1,显示b2_2:值b2_2", "显示b3_1:值b3_1,显示b3_2:值b3_2"); arrText[3] = new objSetOption("显示c:值c", "显示c2_1:值c2_1,显示c2_2:值c2_2", "显示c3_1:值c3_1,显示c3_2:值c3_2"); arrText[4] = new objSetOption("显示d:值d", "显示d2_1:值d2_1,显示d2_2:值d2_2", "显示d3_1:值d3_1,显示d3_2:值d3_2"); arrText[5] = new objSetOption("显示e:值e", "显示e2_1:值e2_1,显示e2_2:值e2_2", "显示e3_1:值e3_1,显示e3_2:值e3_2"); function select() { var eltSelect1 = document.test.select1; var eltSelect2 = document.test.select2; var eltSelect3 = document.test.select3; var arrSelect1, arrSelect2, arrSelect3; var arrData1, arrData2, arrData3; with(eltSelect1) { var strSelect = options[selectedIndex].value; } for(i = 0;i < arrText.length;i ++) { arrSelect1 = arrText[i].select1; arrData1 = arrSelect1.split(":"); if (arrData1[1] == strSelect) { arrSelect2 = (arrText[i].select2).split(","); for(j = 0;j < arrSelect2.length;j++) { arrData2 = arrSelect2[j].split(":"); with(eltSelect2) { length = arrSelect2.length; options[j].text = arrData2[0]; options[j].value = arrData2[1]; } } arrSelect3 = (arrText[i].select3).split(","); for(j = 0;j < arrSelect3.length;j++) { arrData3 = arrSelect3[j].split(":"); with(eltSelect3) { length = arrSelect3.length; options[j].text = arrData3[0]; options[j].val
JS简单实现动态生成表格
Bigfishseasugar
06-02 526
效果图： 原理： 主要是根据已有数据，利用 document.createElement 生成元素，并用 node.appendChild（child）添加到DOM中。这些操作还是比较简单的，反而觉得是table相关标签之间的关系有点绕。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont
多层级表格js
weixin_30236595的博客
06-13 449
self.FishConfigList = ko.observableArray();self.GetFishConfigList = function (dept_code, report_id) { self.FishConfigList.removeAll(); var objdata = { DEPT_CODE: dept_code, REPORT_ID: report_id...
探索Rowfish.js：一款创新的前端数据可视化库
gitblog_00094的博客
04-21 235
探索Rowfish.js：一款创新的前端数据可视化库 项目地址:https://gitcode.com/rowfishjs/rowfish Rowfish.js 是一个专注于高效、灵活且易于使用的前端数据可视化库。它采用先进的JavaScript技术和WebGL，为开发者提供了一种优雅的方式，将复杂的数据以图表的形式呈现出来，适用于各种类型的数据分析和展示场景。 项目简介 Rowfish.js的核...
jsp常用的onchange事件
farxix的博客
12-11 8201
定义和用法： onchange 事件会在域的内容改变时发生。 onchange 事件也可用于单选框与复选框改变后触发的事件。例如<input>、<select>、<textarea><input type="text" id="name" onchange="myFunction()"><script> function myFunction(){ var x=document.getE
javascript表单三级联动
PinG1270的博客
01-18 1069
页面结构 <form action=""> <select name="" id="provice"> </select> <select name="" id="city"></select> <select name="" id="region"></select> </form> 数据结构 var area = { '河南省': [{
JavaScript设计模式——解释器模式
前端御书房
10-05 480
JavaScript设计模式，解释器模式，持续更新中……
JavaScript练习：表单联动
weixin_33728268的博客
08-06 361
如示例图中所示，在页面中完成两个单选框，切换单选框的不同选项时下方显示的表单随之切换。 当选择在校生时，出现两个select下拉菜单，一个选择城市，一个选择学校，当选择非在校生时，出一个文本输入框 学校下拉菜单里的学校名单均为城市下拉菜单中所选的城市中的大学，当城市发生变化时，学校一起发生变化 城市及学校的数据随意编造即可，无需真实完整 &lt;!DOCTYPE html&gt; &lt;h...
js实现年月日表单三级联动
10-20
主要为大家详细介绍了js实现年月日表单三级联动，生日栏表单三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript二级联动表单
11-26
javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单
js三级联动下拉表单代码
04-25
js三级联动下拉表单代码是一款实用的表单下拉框菜单选择代码。
js三级联动下拉表单特效代码
03-20
js三级联动下拉表单代码是一款实用的表单下拉框菜单选择代码。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 339
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1005
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 508
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 400
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
使用vue3+ts+vite从零开始搭建bolg(二)
qq_75246137的博客
04-21 236
svg:用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。component中的index.ts,注册全局组件。package.json中的scripts配置项。vite.config.ts文档中配置。SvgIcon的index.vue文件。.env.development文件。.env.production文件。vite.config.ts配置。tsconfig.ts配置。.env.test文件。
自定义django form表单,实现外键多级联动
09-09
实现Django中自定义的表单多级联动，需要使用到`ModelForm`和JavaScript来实现。 首先，我们需要创建一个ModelForm，用于实现表单的自定义字段和验证规则。 ```python from django import forms from .models import ModelA, ModelB class MyForm(forms.ModelForm): class Meta: model = ModelA fields = '__all__' # 可根据实际需求选择需要的字段 def __init__(self, *args, **kwargs): super(MyForm, self).__init__(*args, **kwargs) self.fields['second_model'] = forms.ModelChoiceField(queryset=ModelB.objects.none()) if 'first_model' in self.data: try: first_model_id = int(self.data.get('first_model')) self.fields['second_model'].queryset = ModelB.objects.filter(first_model_id=first_model_id) except (ValueError, TypeError): pass elif self.instance.pk: self.fields['second_model'].queryset = self.instance.first_model.modelb_set.order_by('name') ``` 在上面的例子中，`ModelA`是第一个模型，`ModelB`是第二个模型。在`MyForm`类的初始化方法中，根据`first_model`字段的值动态更新`second_model`字段的queryset，实现了多级联动。 接下来，我们需要在模板中添加HTML和JavaScript来实现多级联动效果。 ```html <form method="POST" action=""> {% csrf_token %} {{ form.as_p }} <button type="submit">Submit</button> </form> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $('#id_first_model').change(function() { var url = $(this).attr('data-href'); var first_model_id = $(this).val(); $.ajax({ url: url, data: { 'first_model_id': first_model_id }, success: function(data) { $('#id_second_model').html(data); } }); }); }); </script> ``` 在上面的例子中，我们使用了jQuery来监听`first_model`字段的变化事件。当`first_model`字段的值发生改变时，执行AJAX请求，获取到对应`second_model`字段的选项，并更新页面上的`second_model`字段。 总结来说，我们通过自定义的表单类`MyForm`来实现外键的多级联动，然后通过JavaScript的AJAX请求和动态更新页面的选项来实现表单的多级联动效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值