SpringMVC做二级联动

SpringMVC做二级联动

<select id="myCol" onchange="getChange()">

<option value="1">

大连交大

</option>

<option value="2">

东北财经

</option>

<option value="3">

大连海事

</option>

</select>

<select id="myGet">

</select>

<script type="text/javascript"  >

function getChange() {

//获取到第一个select表单value值

var myCol = document.getElementById("myCol").value;

  //拼接成要获取值的url

var url = "getCateGory?myCol=" + myCol; //url  

//利用jquery的ajax方法，使用此方法要引jquery包

htmlobj = $.ajax( {

url : url,

async : false

});

//此处利用json处理值，还需要引json包，在服务器端可以使用GSON转化数据，响应当前页面

/*服务器端：

//需要引GSON包

  //创建一个Gson对象

Gson gson = new Gson();

//返回一个json格式的字符串 

String pStr = gson.toJson(user);

      System.out.println(pStr);

out.print(pStr);

*/

//接取响应值，并且转化成JSON对象

var obj = JSON.parse(htmlobj.responseText);

//此变量是为拼接而做

var options = "";

var myGet = document.getElementById("myGet");

//myGet.removeChild("option");

//删除现有option节点

for ( var i = 1; i <= myGet.length; i++) {

myGet.remove(i);

}

myGet.remove(myGet.selectedIndex);

   //利用循环，在此将新的option添加上

   for(var i=0;i<obj.length;i++){

  alert(obj[i].uUserName);

     var myOption=document.createElement("option");

  myOption.setAttribute("value",obj[i].uId);

  var testN=document.createTextNode(obj[i].uUserName);

myOption.appendChild(testN);

  myGet.appendChild(myOption);

  

 //此种方法最简单，但是没有技术含量

 //options+="<option value='"+obj[i].uId+"'>"+obj[i].uUserName+"</option>";

 }

// myGet.innerHTML=options;

  

}

</script>