使用json完成聯動效果


1.jsp頁面

首先是兩個下拉框,當公司名字變動時會場負責人的選擇列表也相應變換

<tr>
        <td width="50%" bgcolor="#EAF6EA">
         <div align="right">
          公司名:
         </div>
        </td>
        <td bgcolor="#FFFFFF">
         <s:select list="comInfolist" listValue="Com_name"
          listKey="Com_id" name="Com_id" value="%{mai.comId}" id="com" οnchange="finduserlst1();"></s:select>
         <label style="color: red;">

         </label>
        </td>
       </tr>
<tr>
        <td width="50%" bgcolor="#EAF6EA">
         <div align="right">
          會場負責人:
         </div>
        </td>
        <td bgcolor="#FFFFFF">
         <input type="hidden" id="user_id" value="${mai.responsibleId}"/>
         <input type="hidden" id="user_name" value="${mai.responsibleName}"/>
         <select id="comuser" name="comusername" style="width: 150px" >

         </select>

         <label style="color: red;">

         </label>

        </td>
       </tr>

2.js

js的方法中首先獲得選中框的值,也就是公司id。使用了json,data處爲傳值。


		function finduserlst1(){
//獲取下拉框的選中項
var checkText=$("#com").find("option:selected").val();

$("#comuser").empty();
if(checkText==""){
	$("#comuser").append("<option value=''>----請選擇----</option>");
}else{	
  $.ajax({
   url:"companymanage!findPeopleByComId.do",
   type:"post",
   dataType:"json",
   data:{comID:checkText},
   success:function(json){
   		
	   $("#comuser").append("<option value=''>----請選擇----</option>");
	  
      
	   $.each(json, function(i){  
		   $("#comuser").append("<option value='"+json[i].userid+"'>"+json[i].realName+"</option>");
           
       });
    
   },
 
    error:function (XMLHttpRequest, textStatus, errorThrown){
    
      return false;
}

});	
}
}

3.java方法


然後是action中,首先獲得傳來的comId.之後是方法。注意這裏的需要一個inputstream,不然會報錯。這裏的comID對應上面json處data所傳的值。

private String comID;
private List<User_info> userlist;
private InputStream inputStream;

public String findPeopleByComId() {

		System.out.println("進入了根據公司的id查詢所有的人");
		userlist = meetingAddrInfoService.findPeopleByComId(Integer
				.parseInt(comID));
		String jsonString = JSONArray.fromObject(userlist).toString();
		try {
			inputStream = new ByteArrayInputStream(jsonString.getBytes("UTF-8"));
		} catch (UnsupportedEncodingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return "searchUser";

		// System.out.println("根據公司id查詢所有人:" + userlist + comID);

	}

	public InputStream getInputStream() {
		return inputStream;
	}

	public void setInputStream(InputStream inputStream) {
		this.inputStream = inputStream;
	}

	public List<User_info> getUserlist() {
		return userlist;
	}

	public void setUserlist(List<User_info> userlist) {
		this.userlist = userlist;
	}

	public String getComID() {
		return comID;
	}

	public void setComID(String comID) {
		this.comID = comID;
	}

4.配置

struts2裏的配置如下

<!-- json的配置 -->
   <action name="companymanage" class="com.hb.action.system.MeetingAddrInfoAction" method="{1}">
   	<result name="searchUser" type="stream">
				<param name="contentType">text/json</param>
				<param name="inputName">inputStream</param>
			</result>
   </action>







發佈了33 篇原創文章 · 獲贊 1 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章