使用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试图的CustomRowCellEditForEditing事件





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





就可以实现其效果。

 

 

最近新接触的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：下拉框折叠事件

如有问题，请多指教。

下拉选择功能我们很常见，本文主要介绍了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"
}
]
}
相关推荐：