精华内容
下载资源
问答
  • 使用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下拉框二级联动差不多已实现。
    前台显示如下:这里插入图片描述
    点击上面的协作组,会出来相应的协作组话题,如下图
    在这里插入图片描述

    展开全文
  • 实现下拉框(LookUpEdit)绑定数据可变,直接绑定新的数据源的话,该列其他行的显示数据就会自动清空。 而要实现上图所示效果,简单思路可以是设置好三个LookupEdit: 再在GridControl的View试图的...

    要实现下拉框(LookUpEdit)绑定数据可变,直接绑定新的数据源的话,该列其他行的显示数据就会自动清空。

    而要实现上图所示效果,简单思路可以是设置好三个LookupEdit:

    再在GridControl的View试图的CustomRowCellEditForEditing事件

    根据条件设置其参数e的RepositoryItem属性

    就可以实现其效果。

     

     

    展开全文
  • 最近新接触的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方法。

    一、方法一
    除了数据选择部分,其余内容不变
    filterBy
    二、方法二
    两个下拉框的代码:{
    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:下拉框折叠事件

    如有问题,请多指教。

    展开全文
  • 下拉选择功能我们很常见,本文主要介绍了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操作的工具,直接操作,完成了对于下拉框的...
  • 做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示商品类别请选择{volist name="list" id="vo"}{$vo.cate_name}{/volist}form.on('select(one_cate)', function(data){//data.value ...
  • 目录序正文一、前端样式二、数据展现(1)静态下拉框(2)动态下拉框三、获取下拉框选中传值到后端 序 目的: 基于Mybatis动态获取数据库中的值展现在下拉框...方法一:直接定义 <form> <div class=...
  • 项目业务需求:设计两个搜索下拉框,其中二级下拉框的数据随着一级下拉框...如果需要新增城市的下一级,如区和县的子节点,我们直接在市省国的这张表直接添加数据就行,因为这些都属于地名,可以共存或者说共用一张数
  • 先看一下简单的效果直接上代码html部分 (下拉框中value的数值我是根据数据库中取出来)城市北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省...
  • 本文实例讲述了Yii2实现上下联动下拉框功能的方法。分享给大家供大家参考,具体如下: 首先我先解释下什么是上下联动下拉框 假如一个view里面有两个select,第一个是公司名,第二个是分公司名。公司有多个,每个...
  • 我就废话不多说了,大家还是直接看代码吧~placeholder="客户名称"showSearchoptionFilterProp="children"//自动匹配输入onChange={this.selectChange}>{this.state.selectCustomer}补充知识:antd select如何支持...
  • 下拉框联动标签 ...框架源码地址,我从中学习到很多不错的开发思路,以及项目代码规范方式!...为了减少代码量、实现直接应用 添加权限控制(如不一样的用户进来查看到不一样的查询条件) 控制只显示区县层级开始...
  • 在查询查询页面中,有时候并不会把所有查询项都直接显示出来,而是①根据使用者的选项内容,联动下一个下拉框中应供选择的选项;②根据使用者使用的选项细化深度,提供下一个深度查询数据查询的选项;③根据使用者的...
  • Yii2 实现上下联动下拉框

    千次阅读 2015-06-08 01:09:41
    首先我先解释下什么是上下联动下拉框 假如一个view里面有两个select,第一个是公司名,第二个是分公司名。公司有多个,每个公司又有多个分公司,我们实现的就是点击当前公司后,分公司里面显示的事当前公司的分...
  • 一般我们对于固定值联动下拉框可能会直接把固定值放在数组中,在选择一级下拉框时触发onchange事件,对二级下拉框中赋值。然而在很多情况下我们需要在选择一级下拉框后从数据库动态取出值赋给二级下拉框,这时我们...
  • 这种联动的话整体思路是:第一级没有任何约束,直接从数据库查询即可;第二级数据查询条件是第一级实体类字段 controller 层: @ApiOperation(value = "二级网格与一级网格联动", notes = "二级网格与一级网格...
  • 需要选择省和城市,这就需要二级联动,那个时候一个普遍的做法就是利用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的代码几行就...
  • init.jsp页面,直接跳转到InitShengServlet2这个servlet初始化省份   /** 该servlet初始化完后跳转到list4.jsp */ InitShengServletInitShengServlet package com.servlet; import java.io.IOException; import ...
  • 需要选择省和城市,这就需要二级联动,那个时候一个普遍的做法就是利用javascript脚本来实现,先把数据从数据库中读取出来,放到javascript的数组中,在下拉框的onchange事件触发时,就可以直接从javascript的数组中...
  • 为了实现表格里带下拉框,同时联动另一列,真是想的快吐了。 先展示最终完美方案: 方案也是改了又改, 从直接的 DataGridComboBoxColumn 到 DataGridTemplateColumn的 CellEditingTemplate 再到这个完成版 ...
  • 今天学习了jQuery中的Ajax,简单的实现一个二级联动的实例,废话不多说,直接上代码 //这是jsp代码 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding=...

空空如也

空空如也

1 2 3 4
收藏数 68
精华内容 27
关键字:

下拉框直接实现联动