基于jQuery的二级联动<select>

$(document).ready(function(){
     send();//初始化
     $("#categoryFirst").change(send);
});

<html:select property="categoryFirst" styleId="categoryFirst"  >
	     	<html:option value="办公费用">办公费用</html:option>
	     	<html:option value="租赁费">租赁费</html:option>
	     	<html:option value="物业水电费">物业水电费</html:option>
	     	<html:option value="社会保险费">社会保险费</html:option>
	     	<html:option value="交通费">交通费</html:option>
	     
</html:select>
详细类别：
<html:select property="categorySecond" styleId="categorySecond" ></html:select>

function send(){
		$.ajax({
			type:"POST",
			url:"cost.portal?action=getCategorySecond",
			dataType:"text",
			data:"categoryFirst="+$("#categoryFirst").val(),
			beforeSend:function(XMLHttpRequest)
			{
			},
			success:function(msg)
			{
				$("#categorySecond").empty();
				var s=msg.split("|");
				
				
				for(var i=0;i<s.length;i++){
	                var o=$("<option value='"+s[i]+"'>"+s[i]+"</option>");
	                $("#categorySecond").append(o);
				}
				
			},
			complete:function(XMLHttpRequest,textStatus)
			{
			},
			error:function()
			{
			}
		});
	}

if("getCategorySecond".equals(action)){
			System.out.println("----------------getCategorySecond Cost--------------");
			Map<String, String> map=new HashMap<String, String>();
			map.put("办公费用", "办公用品|日用品|快递费|办公耗材|登记费");
			map.put("租赁费", "上海办公室|海南办公室|宁波办公室|西安办公室|河南办公室");
			map.put("物业水电费", "上海物业费|上海水电费|海南物业费|海南水电费|宁波物业费|宁波水电费|西安物业费|西安水电费|河南水电费|河南物业费");
			map.put("社会保险费", "三金|公积金|综合保险");
			map.put("交通费", "市内交通费");
			
			String categoryFirst=request.getParameter("categoryFirst");
			String data=map.get(categoryFirst);
			
			response.setHeader("ContentType", "text/html");
			response.setContentType("text/html;charset=UTF-8");
			try {
				response.getWriter().write(data);
				
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			return null;
		}

评论

1 楼 chenjianjx 2010-05-13  

Very good!