新手编程1001问（2） Q：前端如何实现页面下拉框Select的联动？ A：上一期，我们回答了JS/JQuery如何获取下拉框选中的文本和值。那么今天的问题，我们可以继续聊聊下拉框了。...下拉框在前端设计中是一个很常用的列表控件。独立的下拉框要实现起来并不难。但是，有时候我们会遇到两个甚至多个下拉框需要联动的问题，这时候，页面的实现就不是一个简单的交互了。...因此，实现联动需要解决的问题关键在于，页面不刷新的情况下，能够根据上一个下拉框的值，获取下一个下拉框的列表数据，并更新到列表。...>").val(item["myval"]).text(item["mytext"]).appendTo( //上面的代码使用到了JQuery的each()方法，不熟悉的同学可以自己先研究一下，我们找时间也可以专门聊聊这个方法... <script src="~/Script/jquery-1.9.1.min.<em>js</em>
无论是原始的jsp页面html页面等，还是现在流行的vue angluar.js等，逻辑都是一样。...但是大多数时候我们只需要开发一个下拉框即可，本文讲解VUE页面中，通过实际案例场景讲解多个下拉框如何实现双向动态联动效果。...，选择其中一个下拉框A的值的时候，另一个下拉框B的值必须为与A是关联的值；也就是说选了A必须有B的选项，反过来同样的道理，选了B的值必须关联上A的值。...可以理解为A和B的值在业务逻辑上已经绑定好了，用户的界面只是按业务需要选择哪一个。以此类推，当有2个以上的值需要动态加载并且关联选择时，这个功能同样适用。...本文的讲解希望对使用VUE开发页面时，遇到多个下拉框动态联动选择场景的伙伴们带来一些帮助和启发。
代码 1.2、后端 Java 代码 2、 POST 请求用户登录操作 2.1、前端 JS 代码 2.2、后端 Java 代码 3、二级联动 3.1、二级联动实际应用 3.2、二级联动的实现思路 3.3...购物时，选择所在地区也会使用二级联动。而三级联动只多一个级而已，做法也是一样的。 ?...3.2、二级联动的实现思路 页面加载完，省份下拉框从后台获取省份数据； 将后台获取的响应数据，渲染到省份下拉框中； 给省份下框绑定值改变的事件，值发生改变之后，把选择的省份 id 传给后台； 将后台获取的响应数据....min.js">script> head> 省份: 请选择option> select> 城市:<select...，当省份下拉框选项改变了，就发送请求获取这个省份 对应城市数据，拿到数据再使用 DOM 显示城市下拉框中 $p.change(function () { var
php、html结合实现二级联动。...一对一源码在php开发中我们经常会遇到一些功能需要二级联动，二级联动就是说我们在选择一级select不同的option，下面的二级option的属性值在进行相应的变动。...简言之就是两个select标签，选择第一个的时候，第二个自动带出相关联的数据。...：添加click事件，回调读取下级数据列表，ajax返回json 代码如下： '; } //js刷新第二个下拉框的值 $("#manageuid").html(option); }, }); });
我们可以这样做： 在每次请求url中加入一个时间戳参数【每次url就不一样了】 加入时间戳参数到url时，也分两种情况 url本身就带有参数了，也就是说有"?"...号了，那么添加时间戳的时候就需要用"&"号 url没有参数，直接使用"?"号来添加时间戳 if(url.indexOf("?")...当时候我们的案例是二级联动，使用Servlet进行控制 这次我们使用JSON作为数据载体在AJAX与服务器交互，使用三级联动，使用Action进行控制.......省份-城市-区域三级联动【Struts2 + JSON版】 ---- 分析 与上次是一样的，只不过这次换了用JSON，使用Action控制罢了... 监听下拉框的变动，使用异步对象与服务器进行交互。...，当选择城市时，把区域的下拉框清空 ---- 总结图 ?
我们可以这样做： 在每次请求url中加入一个时间戳参数【每次url就不一样了】 加入时间戳参数到url时，也分两种情况 url本身就带有参数了，也就是说有"?"...号了，那么添加时间戳的时候就需要用"&"号 url没有参数，直接使用"?"号来添加时间戳 if(url.indexOf("?")...当时候我们的案例是二级联动，使用Servlet进行控制 这次我们使用JSON作为数据载体在AJAX与服务器交互，使用三级联动，使用Action进行控制…....省份-城市-区域三级联动【Struts2 + JSON版】 ---- 9.1分析 与上次是一样的，只不过这次换了用JSON，使用Action控制罢了… 监听下拉框的变动，使用异步对象与服务器进行交互。...，当选择城市时，把区域的下拉框清空 ---- 十、总结图 ?
在一些和会员相关的注册系统中，让用户输入省市信息是非常常见的行为，并且一般都是要求做到省市区联动下拉效果，今天就给大家推荐一个 jQuery 插件 CitySelect，通过 JSON 数据实现省市联动效果... 接下来，我们在#city中，放置三个select，并且三个select分别设置class属性为：prov、city、dist，分别表示省、市、区（县）三个下拉框。...注意如果只想实现省市二级联动，则去掉第三个dist的select即可。...", //区县 nodata:"none" //当子集无数据时，隐藏select }); 下载：CitySelect
，可以通过{{参数名}}获取配置中的参数 Configuration：扩展参数 配置字段内容获取 二、webpack.config.js 设置外部引用包里面的js对象名称，可以在 visual.ts...options：format 格式化，displayUnit 数据单位，enum 自定义下拉框，（使用方式后面详细介绍） （2）dataViewMappings，conditions 设置数据绑定的最大...2．options->visual 组件属性设置（使用方式后面详细介绍） 开启数据联动，只有开启数据联动后，才可以实现组件之间数据联动 设置后显示内容： 3．actions 设置组件按钮，详细介绍请参考...当触发了编辑操作时，值为true。 isFocus: 表示组件的聚焦状态。当触发了聚焦操作时，值为true。...docTheme: 选择的文档主题。 language: 当前语言。 scale: 比例因子。 filters: 用来影响其他组件。
此次动态表单实践由DevOps的CICD部分中的任务配置表单驱动，因此主要考虑的控件类型为输入框、下拉框、和代码编辑器。在实践中几个较为关键的地方分别为表单配置模型、表单联动、表单校验。...，multiSelect代表下拉框是否可以多选； eventName表示当这一项的值发生改变后，会触发前端某个写好的事件做相应的处理，eventName的值就是事件名，而事件的定义由前端来实现。...表单联动主要有两种方式： 第一种是当用户修改表单中某一选项时,表单显示的内容有所变化，如图显示，当用户选择不同的介质策略时，显示的表单项也是不同的。...第二种是数据联动，表单中包含代码库和branch/tag/commitId两个输入项，显然后者的显示内容取决于用户选择了哪个代码库，此处就需要前端检测用户对代码库的选择，然后将选定后的数据作为参数向后端发送请求查询...剩下的问题就是表单校验自定义和表单联动自定义了，新的动态表单不再仅仅支持必填校验，还支持用户手动输入正则表达式校验，同时我们抽象了一些常用的正则表达式为默认选项供用户选择。
省市区联动下拉效果在WEB应用中使用非常广泛，尤其在一些会员信息系统、电商网站最为常见，开发者一般使用AJAX实现无刷新下拉联动。...，并且三个select分别设置class属性为：prov、city、dist，分别表示省、市、区（县）三个下拉框。...如果只想实现省市二级联动，则去掉第三个dist的select即可。...:"岳麓区", //区县 nodata:"none" //当子集无数据时，隐藏select }); 注意：作者原文有很多读者留言说不能使用，主要就是这个url地址不对造成的，这个地址必须指向系统的根目录...（很多项目的图片、JS和css都放在根目录的一个文件夹中，如这个目录是static，url地址就是：/static/js/city.min.js，要确保JS文件已放到此处），否则会读不到省市数据源，这就是很多读者反映的下拉列表为空的问题所在
fieldset> 联动选择框...('select');//重新渲染下拉框 }); //监听区县选择 form.on('select(county)', function(data){ getStreet...(data.value); form.render('select');//重新渲染下拉框 }); //监听乡镇选择 form.on('select(street)', ...$('#js-select-village').html(''); var cityHtml = '请选择' ... res; }, error: function(error) { } }); return resData;}页面初始化加载所有省份信息图片监听选择省份下拉框调用地市信息
文章目录 概述 选择器禁止选择 date-picker禁止选择 input禁止输入 概述 ? 我们这里组件库使用的iview组件库 需求是：特定环节，数据只能查看，不能修改。...---- 选择器禁止选择 选择器: http://v2.iviewui.com/components/select 查看官网正好这个符合我们的需求 ? 看看官方给的demo ?...(flowInfoParam.taskdefname === 'sdsg')" 注意 ：不能省略 ---- date-picker禁止选择 官网：http://v2.iviewui.com/components
二.apex:actionSupport actionSupport作用为当一个特定的事件被触发，比如单击，失去焦点，鼠标移入等操作被触发时，允许组件进行异步的刷新功能，常用场景为联动，失去焦点后校验在数据库中是否唯一等...actionSupport和actionFunction在功能上很相像，不过有几点小区别： 1.actionSupport是直接被其他的元素调用，actionFunction可以通过js调用，你可以在js...其实上面的vf代码是有问题的，当选择了下拉框，右侧的下拉框的值也不修改成yyy，原因是这样的： 当actionSupport执行时，会提交整个form表单，因为上面有一个required的字段，所以导致提交表单失败...，没有走action对应的后台的的method，所以没有更新下拉框里面的值，这种情况有两种可以修改的方式，1是将actionSuuport设置成immediate="true"方式，可以忽略表单的validation... 14 15 16 显示效果：当更改下拉框的之
动态报表的场景有动态查询报表、动态列报表、表数据钻取联动、可视化图表的联动与钻取、数据地图钻取与联动、动态表头动态分组等。...参数的操作： ① 设置参数名称，添加参数，根据实际应用场景的需要选择不同类型的参数，有模板参数、全局参数（类似代码中的参数作用域，有的作用于本张报表，有的可以作用于所有报表） ② 给参数添加控件。...参数添加控件：控件是参数实现查询的载体，选择控件类型，通过将控件和参数绑定，实现在 2、超链关联功能 这个很好理解，就相当于做网页，点击能跳转。...二、动态查询 如上述效果，有两层功能，一层是筛选报表，另一层是当第一个下拉框控件满足某条件，其他条件才显示出来。...FineReport可实现动态显示参数控件，例如： ①选择年报，显示年的下拉框控件 ②选择月报，显示年月下拉框控件 ③选择日报，显示日期下拉框控件 三、数据钻取 报表中数据钻取是一个普遍的需求，FineReport
上次联动的代码是在网上看到的，可能无法实现我的要求 这次是根据后台要求，自己写的一个联动，当然没有请求接口，就是单独写个固定值 演示地址：http://runjs.cn/detail/dta6edch...演示只提供了第一个选项的联动，后面没写，最后的属性“开关”和“温度”都写了，为了突出不同 1.联动的思路 1.首先是选择总类别 2.总类别选择后，会关联出设备 3.设备选择后，会关联出属性 4....in yourdevices" ng-change="changeDev(yourdevice)"> --你的设备-- js...params" ng-change="changeParam(param.display_name)"> --属性-- js...scope.views.data_type $log.log($scope.views) } 4）属性项 html 使用ng-swtch来进行判断显示，若数值类型位bool，则显示单选框，若数值类型位num，则显示位大小比较下拉框和文本框
form class="layui-form"> 联动选择框...form.render('select');//重新渲染下拉框 }); //监听区县选择 form.on('select(county)', function(data){...getStreet(data.value); form.render('select');//重新渲染下拉框 }); //监听乡镇选择 form.on('select...(street)', function(data){ getVillage(data.value); form.render('select');//重新渲染下拉框...监听选择省份下拉框调用地市信息，选择地市加载区县依次类推即可 ? 6.页面展示效果 ?
单击【摘要】视图中的按钮，弹出【新建数据集】对话框后，填写名称、选择数据源名称，选择类型，这里选择“SQL语句”，单击【下一步】，填写sql语句，本例中用到两个数据表“ds”表和“ds1”表，所建数据集...sql分别编辑为：ds: select 货主地区 from 订单 group by 货主地区ds1:select 货主城市,货主地区 from 订单 group by 货主城市,货主地区.图片下拉框联动...，首先需要我们设置好需要联动的数据单元格，选择下拉框选择要的数据。...图片再选择需要随着联动的单元格属性，在数据联动里面设置联动。图片
需要通过AJAX技术解决的问题： 3.3.1 多级下拉框无刷新联动 在最初对此页面进行制作时，采用的是ASP.NET的服务器控件DropdownList，可以达到多级下拉框联动的效果，但是每次第一级下拉框内容变化时...正如第三章所介绍，AJAX的出现正是为增强客户端页面交互体验效果而产生的，关于AJAX的一个典型应用就是“多级下拉框无刷新联动”。 ...具体流程如下（涉及AJAX的部分省去）： 图3.20 “客户端下拉框无刷新联动”流程 3.3.2 客户端Grid控件显示查询结果 当用户点击页面的“查询”按钮后，客户端通过JS将客户端表单数据编码成...其过程和“下拉框”无刷新联动完全一样，只是编码的数据量大一点而已。...这样的客户端Grid控件支持滚动条，当单元格数据长度比较长时，会自动隐藏部分数据，单元格宽度可以拖动改变…… 在本页面中还使用过一个ActiveWidget框架提供的JS控件――Tab控件，可以在页面中实现类似桌面应用程序的选项卡效果
//handler code } //选中其他时 handler code } //这里处理三个下拉选择框的联动刷新...handler code } else { //再次点击，取消其他选项 handler code } //这里处理三个下拉选择框的联动刷新..., merge_flag, download_query_list]; } 上述中，调用的函数select_items_refresh，处理三个下拉框之间的联动刷新，因为对每个不同的组件，刷新有很大的差别...联动刷新的三个选择框如下： Js中普通的省市区三级联动代码网上很多，因为省市区是固定顺序刷新的，选择省->刷新市->选择市->刷新区，并且数据固定也不是很多，对应关系可以保存在数组里，比较简单一点。...保存的表是按照天进行存放的，查询时间段的功能可以选择开始日期和结束日期，查询多天的汇总结果和实时曲线结果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
