spring Mvc 二级联动（2）

<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>

 

转载于:https://www.cnblogs.com/ZFnice/p/5706704.html