Spring MVC菜单显示问题

不知道此处怎么描述准确，实现效果如下：

       1、点击图中下拉菜单，选值

       2、显示如下图所示（其中土拨鼠1，土拨鼠2，挖坑以及填坑均包含字段测试1）

                 

我当时看了很多博客也没找到能把这个写的让我这种小白明白且会做的，然后自己琢磨之下，用了下面这种笨拙的方法。

       在参考下面的代码之前，需要你略懂ajax、java、JavaScript以及HTML语言。另因部分原因数据库设计等无法给予展示，请各位同胞自行编写适合自己业务的代码，仅提供思路进行参考，特此声明。

1、JSP文件中相关HTML代码，需要注意的有土拨鼠实例选择表单的id以及响应事件onchange，onchange事件也可以在ajax响应中直接绑定id然后做处理，本鼠选择了第一种方式（因为当时还比较low并不知道第二种方式）。

		<div class="control-group">
			<label class="control-label">土拨鼠实例：</label>
			<div class="controls">
				<form:select id="example" path="test" class="input-xlarge required" itemValue="" οnchange="responseQ()">
					<form:option value="" id="" label="--请选择--"></form:option>
					<form:options items="${testList}" itemValue="id" itemLabel="testName"  ></form:options>
				</form:select>
				<span class="help-inline"><font color="red">*</font> </span></div>
			</div>

		<%--//选值后显示对应的属性--%>
		<div class="control-group" id="testForm" hidden="true"></div>

2、responseQ()方法如下所示：

 function  responseQ(){
            var name=document.getElementById("example");
            var html='';
            $.ajax({
		type:"GET",
                url: "${ctx}/URL",//此处填你自己controller层响应方法对应的URL，将符合要求的值查出，用于后续显示
                data: {"exampleID":name.value},
		success:function(data){

				loop=data.length;
				document.getElementById("testForm").innerHTML="";
                                if(data.length>0){
				    	document.getElementById("testForm").style.display="block";
				    	for(var i = 0; i<data.length;i++){
                                               html+= "<div class=\"control-group\"><label id='label"+i+"' class=\"control-label\">"+data[i].baseName+"：</label>" +
							   " <input id='form"+i+"'  value='' name=''/>"+"</div>";
                        }
						$("#testForm").append(html);
                    }
                    else{
                        document.getElementById("testForm").style.display="none";
					}
				},
				error:function(){ alert("请求失败")}
            });
        }

在此处需要着重注意的问题是，获取输入框的id以及传值。在每次改变下拉菜单的值时要把之前的内容清空，以免产生叠加的问题。即一下语句所负责的事情

document.getElementById("testForm").innerHTML="";

下面顺便提一下上面图中所注意到的问题，这个换行符一直是我比较头疼的事情，但是具体也没有去查，然后就在写这篇博客的时候顺手查了一下那句话，然后就把问题解决了，写博客作用还是挺大的讲真。

document.getElementById("testForm").style.display="block";

把上面语句中的block值改为inline。具体区别请参阅下图（图源自w3school）

看了一下controller文件中，需要注意的大概就是需要加@ResponseBody注解,其中findType()方法对应dao层以及xml中的查询语句。

	@ResponseBody
	@RequestMapping(value="xxx")
	public List<XXXXXXXXXX> findType(String exampleID){
		List<XXXXXXXXXX> xxxList=xxx.findType(exampleID);
		return xxxList;
	}

应该没有其他需要注意的问题了吧，要是有疑问可以评论联系我。若有问题，欢迎大佬们批评指正。