二级联动 结合JQuery

[color=cyan][/color]++++++页面代码   通过大类别动态触发小类别+++++
<div class="search fr">
    <select name="stypeBig" id="stypeBig" class="mt" onchange="onloadSmallType()">
<option value="0">-商品大类别-</option>
<s:iterator id="topSelectValueList" value="topSelectValueList">
<option value='<s:property value="#topSelectValueList.categoryId"/>'>
<s:property value="#topSelectValueList.categoryName"/></option>
</s:iterator>
</select>
<select name="stypeSmall" id="stypeSmall" class="mt">
<option value="0">-商品小类别-</option>
</select>
<input name="topSeniorSearch" id="topSeniorSearch" type="text" value="请输入关键字" class="ipt1" onblur="focusSearch()" onclick="clikSearch()"/>&nbsp;
<a href="javascript:gaojiSearch()"><img src="<%=request.getContextPath()%>/image/platform/search_img.gif" class="mt"/></a>
</div>
</div>


++++++++JQuey 首先加载大类别+++++++++
$(document).ready(function (){

jQuery.getJSON('bigTypeTopNew.action',function(json){
var bigType=eval("("+json+")");
         var defaultIndex =0;
         var select1 = document.getElementById("stypeBig");
         var defaultValue=select1.value;
         select1.length=0;
         for(var i in bigType){
        var option = document.createElement("option");
        option.value=i;
        option.innerText=bigType[i];
        select1.appendChild(option);
        if(null!=defaultValue&&i==defaultValue){
        defaultIndex=select1.length-1;
        }
        }
        window.setTimeout(setValue, 5);
        function setValue(){
           select1.selectedIndex = defaultIndex;
        }
});

if($("#bigTypeSelectXXXX")!=null&&$("#bigTypeSelectXXXX").val()!=null&&$("#bigTypeSelectXXXX").val()!=""){
$("select[@name='stypeBig'] option[@selected]").val($("#bigTypeSelectXXXX").val());
onloadSmallType();
}

if($("#textInputXXXX")!=null&&$("#textInputXXXX").val()!=null&&$("#textInputXXXX").val()!=""){
$("#topSeniorSearch").val($("#textInputXXXX").val());
}

})

+++++++通过大类别触发小类别+++++++
function onloadSmallType(){
var stypeBig=document.getElementById("stypeBig").value;
jQuery.getJSON('smallTypeTopNew.action',{'topSeniorSearchBigType':stypeBig},function(json){
var smallType=eval("("+json+")");
         var defaultIndex =0;
         var select2 = document.getElementById("stypeSmall");
         var defaultValue=select2.value;
         select2.length=0;
         for(var i in smallType){
        var option = document.createElement("option");
        option.value=i;
        option.innerText=smallType[i];
        select2.appendChild(option);
        if(null!=defaultValue&&i==defaultValue){
        defaultIndex=select2.length-1;
        }
        }
        window.setTimeout(setValue, 5);
        function setValue(){
           select2.selectedIndex = defaultIndex;
        }
});


++++++++++java类传回的数据++++++++++
+++大类别 this.topSelectValueList=this.seniorSearchService.queryForSeniorSearchTopSelectListNew();//头部搜索下拉框大分类
if(topSelectValueList.size()<=0) {
rtnMsgBig = "{0:\"-商品大类别-\"";
}else{
rtnMsgBig = "{0:\"-商品大类别-\",";
}
   
    for(int i=0;i<topSelectValueList.size();i++){
    if(i<topSelectValueList.size()-1){
    rtnMsgBig = rtnMsgBig + topSelectValueList.get(i).getCategoryId()+":\"" +topSelectValueList.get(i).getCategoryName() +"\",";
    }else{
    rtnMsgBig = rtnMsgBig + topSelectValueList.get(i).getCategoryId()+":\"" +topSelectValueList.get(i).getCategoryName()+"\"";
    }
    }
    rtnMsgBig = rtnMsgBig +"}";
return "json:rtnMsgBig";


++++小类别
HttpServletRequest request =super.getHttpServletRequest();
    try{
    int typeId=Integer.valueOf(request.getParameter("topSeniorSearchBigType").trim());
    if(typeId>0){
    topSmallSelectValueList=this.seniorSearchService.queryForSeniorSearchSmallSelectListNew(typeId);
    }else{
    topSmallSelectValueList="{0:\"-商品小类别-\"}";
    }
    }catch(Exception e){
    return "json:topSmallSelectValueList";
    }
    return "json:topSmallSelectValueList";