二级联动结合JQuery

最新推荐文章于 2025-08-21 18:01:40 发布

iteye_6709

最新推荐文章于 2025-08-21 18:01:40 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery json ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_6709/article/details/81931163

本文介绍了一个基于Java和jQuery实现的动态下拉菜单功能，该功能可根据用户选择的大类别动态加载并显示对应的小类别选项。此外，还实现了输入框用于关键词搜索，并提供了高级搜索功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[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()"/>
<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";