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="" onchange="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;
	}

應該沒有其他需要注意的問題了吧，要是有疑問可以評論聯繫我。若有問題，歡迎大佬們批評指正。