近日在项目中碰见下拉框联动的问题,要求异步刷新,百度了好多,虽然讲的很详细,但是对于初级的我来说,使用起来还是有难度,一下提供几个别人的纯jQuery实现的省市联动:
http://www.helloweba.com/view-blog-188.html
http://www.jb51.net/article/41619.htm
因为本人刚接触jQuery,对使用还不是很到位,所以就根据自己的想法写了一个下拉框联动的实例,分享出来,方法比较简单和低级, 仅供初学者参考。
项目说明:采用的springMVC+hibernate框架
首先是需求: 项目要求在新增页面中添加下拉联动,(点击数据源,显示对应可供选择的主表信息列表),如图:
思路:首先,将数据源信息,在controller中全部查寻到,并且返回到页面中,这样,一开始,第一级下拉列表(数据源),然后在数据源下拉框中增加 onchange()事件,在onchange()事件中拼出 上图,主表名称 的下拉菜单。
程序实现:
第一步:查询到一级下拉框所需的值。并返回页面。
/**
* 新增
* @return
*/
@RequestMapping(value = "createForm")
public String createForm(Model model,HttpServletRequest request){
List<DataCubeNodeManage> sourceList=(List<DataCubeNodeManage>) dataCubeNodeManageService.findNodeAllList();
String parentId=request.getParameter("parentId");
model.addAttribute("parentId", parentId);
model.addAttribute("sourceList", sourceList);
return "mdx/mdxXmlInfoForm";
}
第二步:在页面中取值,并且向一级下拉框增加, onchange()事件,
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label class="control-label col-xs-3 text-right">数据源名称:
</label><font color="red"> *</font>
<div class="col-xs-8">
<select name="source" id="source" class="form-control validate[required]" οnchange="jumpPage();">
<option value="">请选择</option>
<c:forEach items="${sourceList}" var="list">
<option value="${list.id}"
<span style="white-space:pre"> </span><c:if test="${obj.source==list.id }">selected="selected"</c:if> >
<span style="white-space:pre"> </span>${list.nodeNames}
<span style="white-space:pre"> </span></option>
</c:forEach>
</select>
</div>
</div>
</div>
</div>
需要注意的是, 一级下拉有值,但是二级下拉为一个空的 <select></select>标签
<div class="">
<label class="control-label col-xs-3 text-right">主表名称:
</label><font color="red"> *</font>
<div class="col-xs-8">
<select name="primaryTablename" id="primaryTablename" class="form-control validate[required]">
</select>
<input type="hidden" id="primaryTablenameval" value="${obj.primaryTablename}" >
</div>
</div>
第三步:在onchange()方法中,拼出二级下拉菜单
function jumpPage(){
var sel2 = $("#primaryTablename");
var selVal = $("#primaryTablenameval").val();
<span style="white-space:pre"> </span>sel2.empty();
sel2.append("<option value=''>请选择</option>");
source=$("#source").val();
if($('#selectForm').validationEngine('validate')){
$('#selectForm').ajaxSubmit({
url: "${ctx }/mdxXmlInfoController/jumpPage?source="+source,
success: function(data){
var data = eval('(' + data + ')');
for ( var i = 0; i < data.length; i++) {
var col = data[i];
if(selVal==data[i].id) {
sel2.append("<option value=" + data[i].id + " selected=\"true\">" + data[i].tableName + "</option>");
}else {
sel2.append("<option value=" + data[i].id + ">" + data[i].tableName + "</option>");
}
}
}
});
}
}
第四步:在controller中 得到并组织二级下拉菜单(实例中为:主表名)数据。
/**
* 异步加载下拉框数据
*/
@RequestMapping(value = "jumpPage", method = RequestMethod.POST)
@ResponseBody
public String jumpPage(HttpServletRequest request){
String msg="";
try {
String source=request.getParameter("source");
List<Map<String,String>> msgList=new ArrayList<Map<String,String>>();
List<DataCubeDatebaseTable> dataCubeDatebaseTableList = dataCubeDatebaseTableService.findTableList(source);
if(dataCubeDatebaseTableList.size()>0){
for (int i = 0; i < dataCubeDatebaseTableList.size(); i++) {
DataCubeDatebaseTable dataCubeDatebaseTable=dataCubeDatebaseTableList.get(i);
Map<String,String> msgMap=new HashMap<String, String>();
msgMap.put("id", dataCubeDatebaseTable.getId());
msgMap.put("tableName", dataCubeDatebaseTable.getTableName());
msgList.add(msgMap);
}
if(msgList.size()>0){
msg=JsonUtil.beanToJson(msgList);
}
}
} catch (Exception e) {
e.printStackTrace();
}
return msg;
}
第五步:运行结果
总结:由于本项目是建立在springMVC+hibernate 框架下的,有些方法是封装的,可能无法展示,总之,思路就是这样,可能有些 繁琐,有些复杂, 但是 功能实现了。 初学者可以借鉴。 等以后 jQuery用的熟练了,回过头来再进行修改。