基于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;
}