-
JQuery和Ajax以及数据库实现动态select下拉框二级联动
2019-03-27 15:24:55使用JQuery和Ajax实现select下拉框二级联动 首先聊下项目背景。项目是一个类似于百度贴吧的平台,在项目里,用“协作组”表示贴吧的吧,“主题”表示每个吧里的帖子,用户可以对主题进行评论。我现在要做的是选定一...使用JQuery和Ajax实现select下拉框二级联动
首先聊下项目背景。项目是一个类似于百度贴吧的平台,在项目里,用“协作组”表示贴吧的吧,“主题”表示每个吧里的帖子,用户可以对主题进行评论。我现在要做的是选定一个协作组,把协作组的话题的评论全部以Excel的形式导出来。因为话题是依赖于协作组的,所以选择的时候就需要将协作组的ID当做筛选话题的条件。
话不多说,直接上代码。
jsp:<div style="margin-top: 15px; margin-left:5px; margin-bottom: 20px; width: 95%;overflow:hidden; "> <label style="margin-top:5px;margin-left:15px;float: left;">协作组:</label> <select class="form-control" id="group" style="margin-left: 15px; width: 70%; ;float: left; " onChange="findClass()"> <option value="-1" selected = "selected">全部</option> <c:forEach items="${groups}" var="item"> <option value="${item.id}">${item.name}</option> </c:forEach> </select> <label style="margin-top:20px;margin-left:15px;float: left; ">话题:</label> <select id="classId" name="classId" class="form-control" id="topic" style="margin-top:15px;margin-left: 15px; width: 70%; ;float: left; "> <option value="-1">请选择</option> </select> </div>
前面第一个select里面用forEach遍历所有的协作组,当选定某一个协作组时会触发findClass()这个函数,findClass()函数如下:
function findClass(){
var groupId = $("#group").val();
console.log(groupId);
$.ajax({
url:“findTopics”,
type:“get”,
data:{groupId:groupId},
success:function(data){
console.log(data);
$("#classId option").remove();
$("#classId").append(“请选择”);
if (data != 0) {
for ( var i = 0; i < data.length; i++) {
var topicId = data[i].topicId;
var topicName = data[i].topicName;
$("#classId").append(
“”
+ topicName + “”);
}
}
},
error : function(XMLResponse) {
alert(XMLResponse.responseText);
}
});
}通过var groupId = $("#group").val();获取选定的协作组ID,再通过ajax将这个ID传递给后台,后台获取到这个ID后会通过ID去数据库查找此ID下的所有话题,然后返回给前台,这样就可以根据返回的数据动态增加显示话题option标签的
HTML代码。
整个项目是基于SSM框架实现的,很多JAR包已手动导入
后台代码如下:
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;@RequestMapping(value="/group/findTopics")
public String findClass(HttpServletRequest reuqest,HttpServletResponse response
) throws Exception{
response.setContentType(“text/json; charset=UTF-8”);
String groupId = reuqest.getParameter(“groupId”);
long userId = SessionHandler.getUserSession().getUserId();
// System.out.println("---------groupId是:"+groupId);
Integer id = Integer.parseInt(groupId);
System.out.println("---------groupId是:"+id);
PrintWriter out = null;
try{
out = response.getWriter();
}catch(Exception e){
e.printStackTrace();
}
JSONArray array = new JSONArray();
JSONObject member = null;
try{
//根据协作组的Id 来查找协作组下的所有话题
ListtopicsList = groupTopicService.findTopicsByGroupId(id,userId);
for(Topics topic:topicsList){
member = new JSONObject();
member.put(“topicId”, topic.getTopicId());
member.put(“topicName”, topic.getTopicName());
// System.out.println("------------------------"+topic.getTopicName());
array.add(member);
}
}catch(Exception e){
e.printStackTrace();
}
out.print(array.toString());
return null;
}
至此,整个select下拉框二级联动差不多已实现。
前台显示如下:
点击上面的协作组,会出来相应的协作组话题,如下图
-
DevExpress GridControl 实现两个下拉框的数据联动、实现下拉框(LookUpEdit)绑定数据可变(不影响其他行...
2018-10-23 15:12:45要实现下拉框(LookUpEdit)绑定数据可变,直接绑定新的数据源的话,该列其他行的显示数据就会自动清空。 而要实现上图所示效果,简单思路可以是设置好三个LookupEdit: 再在GridControl的View试图的...要实现下拉框(LookUpEdit)绑定数据可变,直接绑定新的数据源的话,该列其他行的显示数据就会自动清空。
而要实现上图所示效果,简单思路可以是设置好三个LookupEdit:
再在GridControl的View试图的CustomRowCellEditForEditing事件
根据条件设置其参数e的RepositoryItem属性
就可以实现其效果。
-
关于extjs的下拉框二级联动
2017-04-13 13:34:57最近新接触的extjs,需要写下拉框,实现城市与所在街道的联动。用了两种方法。一种是应用filterBy方法 ,另一种是应用store的proxy直接查找。数据量大的时候使用第二种方法。最近新接触的extjs,需要写下拉框,实现城市与所在街道的联动。用了两种方法。一种是应用filterBy方法 ,另一种是应用store的proxy直接查找。数据量大的时候使用第二种方法。
先介绍两种概念,都是API文档中的定义,个人认为,阅读API文档是接触新语言时最有效的方法。
1.proxy:Proxies are used by Stores to handle the loading and saving of Model data. Usually developers will not need to create or interact with proxies directly.
2.filterBy( fn, [scope] ):Filters by a function. The specified function will be called for each Record in this Store. If the function returns true the Record is included, otherwise it is filtered out
说明一下,我在定义下拉框组件的时候用的是itemId,所以获取组件不能使用Ext.getCmp方法。一、方法一
除了数据选择部分,其余内容不变
二、方法二
两个下拉框的代码:{
xtype: ‘combobox’,
fieldLabel: ‘*城镇/乡’,
emptyText: ‘请选择城镇/乡’,
name: ‘townId’,
itemId: ‘townId’,//组件的Id
store: ‘TownInfos’,
displayField: ‘townText’,//显示的值:城市名称
valueField: ‘townId’,//返回的值:城市Id
typeAhead: true,
forceSelection: true,//要求输入的值必须在列表中存在
listeners: {// select监听函数
select: function (combo, record, eOpts) {
var form = combo.up();//获取城镇下拉框的上层组件
var stressCombo = form.down(“#stressId”);//通过stressId加载街道下拉框组件
stressCombo.clearValue();//清空
}
}
}, {
xtype: ‘combobox’,
fieldLabel: ‘*街道’,
emptyText: ‘请选择街道’,
name: ‘stressId’,
itemId: ‘stressId’,
//StressInfos是写好的对应于数据库表的街道store
store: Ext.create(‘StressInfos’, {autoLoad: false}),//autoLoad属性保证不自动装配store,只有触发下拉框后加载值
displayField: ‘stressText’,//显示的值:街道名称
valueField: ‘stressId’,//返回的值:街道Id
forceSelection: true,//要求输入的值必须在列表中存在
listeners: {// select监听函数
expand: function (combo, form, store) {
var form = combo.up();//获取街道下拉框的上层组件
var townCombo = form.down(“#townId”);通过townId加载城镇下拉框组件
var store = combo.getStore();//获取该下拉框的store
var proxy = store.getProxy();准备加载数据
if (townCombo.value) {//如果城镇下拉框已经选定
//加载街道的store中城镇名称与城镇下拉框值相等的数据项
proxy.setExtraParam(“townText”, townCombo.getRawValue());
} else {
proxy.setExtraParam(“townText”, “null”);//不加载任何数据项
}
store.load();//加载查找后的数据
}
}
},
相关说明:
1.关于联动的重要部分listeners
第一个listeners:先选择了街道,再去点击城镇的下拉框,此时需要将街道的数据清零,避免产生错误数据。
第二个listeners:选择街道时判断城镇是否选定,选定了进行查找;没选定时禁止选择街道选项。
2.关于下拉框的触发事件类型
change:显示的值改变事件
select:选定选项值事件
expand:下拉框展开事件
collapse:下拉框折叠事件如有问题,请多指教。
-
layui多级联动下拉框的实现_jquery基于layui实现二级联动下拉选择
2020-12-31 09:12:15下拉选择功能我们很常见,本文主要介绍了jquery基于layui实现二级联动下拉选择(省份城市选择),具有一定的实用价值,需要的朋友可以参考下,希望能帮助到大家。先看一下简单的效果直接上代码html部分 (下拉框中value...下拉选择功能我们很常见,本文主要介绍了jquery基于layui实现二级联动下拉选择(省份城市选择),具有一定的实用价值,需要的朋友可以参考下,希望能帮助到大家。
先看一下简单的效果
直接上代码
html部分 (下拉框中value的数值我是根据数据库中取出来)
城市
北京市
天津市
河北省
山西省
内蒙古自治区
辽宁省
吉林省
黑龙江省
上海市
江苏省
浙江省
安徽省
福建省
江西省
山东省
河南省
湖北省
湖南省
广东省
广西壮族自治区
海南省
重庆市
四川省
贵州省
云南省
西藏自治区
陕西省
甘肃省
青海省
宁夏回族自治区
新疆维吾尔自治区
台湾省
香港特别行政区
澳门特别行政区
js操作部分
form.on('select(province)', function(data){
$.getJSON("/api/getCity?pid="+data.value, function(data){
var optionstring = "";
$.each(data.data, function(i,item){
optionstring += "" + item.name + "";
});
$("#city").html('' + optionstring);
form.render('select'); //这个很重要
});
});
后台返回的数据格式json
{
"status": 200,
"message": "result",
"data": [
{
"code": "3418",
"name": "宣城市",
"province": "34"
},
{
"code": "3417",
"name": "池州市",
"province": "34"
},
{
"code": "3416",
"name": "亳州市",
"province": "34"
},
{
"code": "3415",
"name": "六安市",
"province": "34"
},
{
"code": "3413",
"name": "宿州市",
"province": "34"
},
{
"code": "3412",
"name": "阜阳市",
"province": "34"
},
{
"code": "3411",
"name": "滁州市",
"province": "34"
},
{
"code": "3408",
"name": "安庆市",
"province": "34"
},
{
"code": "3407",
"name": "铜陵市",
"province": "34"
},
{
"code": "3406",
"name": "淮北市",
"province": "34"
},
{
"code": "3405",
"name": "马鞍山市",
"province": "34"
},
{
"code": "3404",
"name": "淮南市",
"province": "34"
},
{
"code": "3403",
"name": "蚌埠市",
"province": "34"
},
{
"code": "3402",
"name": "芜湖市",
"province": "34"
},
{
"code": "3401",
"name": "合肥市",
"province": "34"
}
]
}
相关推荐:
-
如何通过jQuery实现select下拉框的联动效果
2017-12-10 21:39:51由于项目需要,小编需要实现三个HTML的select下拉框联动的效果,如果考虑到实际用户体验的话,直接用异步刷新的方式操作DOM是最好的选择,这里小编直接使用了jQuery作为DOM操作的工具,直接操作,完成了对于下拉框的... -
layui多级联动下拉框的实现_layui select下拉菜单联动
2020-12-31 09:12:13做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示商品类别请选择{volist name="list" id="vo"}{$vo.cate_name}{/volist}form.on('select(one_cate)', function(data){//data.value ... -
JS学习 | 【动态下拉框】连接数据库实现联动效果
2019-06-07 23:07:17目录序正文一、前端样式二、数据展现(1)静态下拉框(2)动态下拉框三、获取下拉框选中传值到后端 序 目的: 基于Mybatis动态获取数据库中的值展现在下拉框...方法一:直接定义 <form> <div class=... -
Vue+ElementUI实现下拉框的二级联动
2020-12-03 15:06:39项目业务需求:设计两个搜索下拉框,其中二级下拉框的数据随着一级下拉框...如果需要新增城市的下一级,如区和县的子节点,我们直接在市省国的这张表直接添加数据就行,因为这些都属于地名,可以共存或者说共用一张数 -
layui多级联动下拉框的实现_jquery基于layui实现二级联动下拉选择(省份城市选择)...
2020-12-31 09:12:14先看一下简单的效果直接上代码html部分 (下拉框中value的数值我是根据数据库中取出来)城市北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省... -
Yii2实现上下联动下拉框功能的方法
2020-12-19 05:17:56本文实例讲述了Yii2实现上下联动下拉框功能的方法。分享给大家供大家参考,具体如下: 首先我先解释下什么是上下联动的下拉框 假如一个view里面有两个select,第一个是公司名,第二个是分公司名。公司有多个,每个... -
antd 下拉框怎么联动_Antd下拉选择,自动匹配功能的实现
2020-12-21 04:28:38我就废话不多说了,大家还是直接看代码吧~placeholder="客户名称"showSearchoptionFilterProp="children"//自动匹配输入onChange={this.selectChange}>{this.state.selectCustomer}补充知识:antd select如何支持... -
Jeesite框架实现城市下拉框联动插件,area.tag自定义标签
2019-03-26 11:10:58下拉框联动标签 ...框架源码地址,我从中学习到很多不错的开发思路,以及项目代码规范方式!...为了减少代码量、实现直接应用 添加权限控制(如不一样的用户进来查看到不一样的查询条件) 控制只显示区县层级开始... -
报表:JS控制下拉框数据联动和隐藏/显示
2019-04-04 22:58:04在查询查询页面中,有时候并不会把所有查询项都直接显示出来,而是①根据使用者的选项内容,联动下一个下拉框中应供选择的选项;②根据使用者使用的选项细化深度,提供下一个深度查询数据查询的选项;③根据使用者的... -
Yii2 实现上下联动的下拉框
2015-06-08 01:09:41首先我先解释下什么是上下联动的下拉框 假如一个view里面有两个select,第一个是公司名,第二个是分公司名。公司有多个,每个公司又有多个分公司,我们实现的就是点击当前公司后,分公司里面显示的事当前公司的分... -
Struts2 、Jquery 、ajax实现二级下拉框联动
2012-04-17 16:26:20一般我们对于固定值联动的下拉框可能会直接把固定值放在数组中,在选择一级下拉框时触发onchange事件,对二级下拉框中赋值。然而在很多情况下我们需要在选择一级下拉框后从数据库动态取出值赋给二级下拉框,这时我们... -
实现前端两个下拉框的联动(前端基于bootstrapt和freemarker,后台基于springboot+jpa)
2020-09-28 22:42:43这种联动的话整体思路是:第一级没有任何约束,直接从数据库查询即可;第二级数据查询条件是第一级实体类字段 controller 层: @ApiOperation(value = "二级网格与一级网格联动", notes = "二级网格与一级网格... -
利用ASP.NET 2.0的客户端回调功能制作下拉框无限级联动
2019-10-08 02:46:54需要选择省和城市,这就需要二级联动,那个时候一个普遍的做法就是利用javascript脚本来实现,先把数据从数据库中读取出来,放到javascript的数组中,在下拉框的onchange事件触发时,就可以直接从javascript的数组中... -
js快速实现省市级二级联动下拉框
2019-03-18 17:57:09由于逻辑简单,可以快速实现,我就直接上代码了。 目前来说数据都应在数据库中,这个是偶然发现的一个代码,所以记录一下,以防万一使用; html部分 <div class="col-md-3"> <div class="form-group... -
dwr 联动下拉框
2009-07-24 16:05:07今天在公司无聊,学学dwr 下拉框联动,看了几个帖子,自己随手做了一个,业务很简单也不整dao了,直接往一个map里面放东西.弄完后对比了一下,现在公司的实现还是用最原始的ajax,页面代码很繁琐,而dwr的代码几行就... -
Ajax学习之------>Ajax和Json实现无限下拉框联动(上)
2013-03-08 22:13:50init.jsp页面,直接跳转到InitShengServlet2这个servlet初始化省份 /** 该servlet初始化完后跳转到list4.jsp */ InitShengServletInitShengServlet package com.servlet; import java.io.IOException; import ... -
利用asp.net 2.0的客户端回调功能制作下拉框无限级联动
2006-05-25 11:38:00需要选择省和城市,这就需要二级联动,那个时候一个普遍的做法就是利用javascript脚本来实现,先把数据从数据库中读取出来,放到javascript的数组中,在下拉框的onchange事件触发时,就可以直接从javascript的数组中... -
WPF DataGrid ComboBox 下拉框数据绑定。且默认显示下拉框,可与其他列绑定联动。
2020-03-17 01:02:44为了实现表格里带下拉框,同时联动另一列,真是想的快吐了。 先展示最终完美方案: 方案也是改了又改, 从直接的 DataGridComboBoxColumn 到 DataGridTemplateColumn的 CellEditingTemplate 再到这个完成版 ... -
二级联动,实现前一个select下拉框改变,后一个随之改变
2018-09-20 19:46:14今天学习了jQuery中的Ajax,简单的实现一个二级联动的实例,废话不多说,直接上代码 //这是jsp代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding=...
-
必须要位置最低每秒2次(2Hz)的频率发布offboard_control_mode topic 才能保证offboard online,那就是得保证时时刻刻都在发指令?那普罗米修斯是怎么做到的呢?
-
文字转语音真人发声软件 | 妥妥的人工智能AI配音专家 | 采用阿里语音合成引擎
-
【Python-随到随学】 FLask第一周
-
GitHub中Alpha、Beta、RC、GA的区别
-
SLAM导航机器人零基础实战系列-第2章_ROS入门
-
流浪猫狗领养完整.rar
-
C++代码规范和Doxygen根据注释自动生成手册
-
MySQL 主从复制 Replication 详解(Linux 和 W
-
2.简单查询&&限定查询&&查询排序
-
DHCP 动态主机配置服务(在Linux环境下,配置单网段或跨网段提)
-
pr插件合集.zip
-
自动化测试Python3+Selenium3+Unittest
-
Spring.zip
-
虚幻4引擎基础
-
Python脚本项目源码-艺术签名生成器
-
基础算法 第9章 第2节 动态规划背包问题(C++版)-2021.02.26.pdf
-
内存计算研究进展(来自中国科学 信息科学)
-
Python小游戏源码-五子棋游戏源码
-
day2学习笔记
-
Unity 热更新技术-ILRuntime