struts2+spring3+ibatis下类似淘宝搜索的的三级互联效果
项目框架 struts2+spring3+ibatis
用了js+json+jq去实现这个效果
?
需要jquery-min.js
<script>
function selectOnchangeb(){
var obj=document.getElementById('myselecta');??
?
var index=obj.selectedIndex; //序号，取当前选中选项的序号??
?
var val = obj.options[index].value;?
? var sel = $("#optionb");?//二级下拉框Id
var parentID=val;
??? //alert(parentID);
??? $.getJSON("${context}/courseTtype/index/getCourseTypeSonTypes.action?parentID="+parentID,function call(data){??
???????????? writeHtml(data);?
??????? });
}??
function writeHtml(data){
??? var sel = $("#optionb"); //二级下拉框Id
??? sel.empty();
????? var objb=document.getElementById('optionb');?
???? objb.options.length=0;
????? objb.add(new??? Option("",""));?
?? // alert(data);
$.each(data,function(i, item){//填充到二级下拉框
//alert(item.name);
???????????????? // $("<option value='"+item.mainid+"'>"+item.name+"</option>").appendTo(sel);??? //这个jq实现不了那个填充效果不知道为什么? 无奈之下只能下面的js填充法去实现
????????????????? var obj=document.getElementById('optionb');??
?????? //? 添加一个选项??
???????? obj.add(new??? Option(item.name,item.mainid));??
??????????????? });?
??????????????? selectOnchangec();
}
function selectOnchangec(){
//alert('b');
//var obj=document.getElementById('optionb');??
?
//var index=obj.selectedIndex; //序号，取当前选中选项的序号??
????? var selects=document.getElementsByName('optionb');
????? var val;
??? if(selects&&selects[0])
??? {
?????? val=selects[0].value;
???? }
?//val = obj.options[index].value;?
? var sel = $("#optionc");?//三 级下拉框Id
var parentID=val;
?? // alert(parentID);
??? $.getJSON("${context}/courseTtype/index/getCourseTypeSonTypes.action?parentID="+parentID,function call(data){??
???????????? writeHtmlb(data);?
??????? });
}??
function writeHtmlb(data){
??? var sel = $("#optionc"); //三级下拉框Id
??? sel.empty();
????? var objb=document.getElementById('optionc');?
???? objb.options.length=0;
????? objb.add(new??? Option("",""));?
?? // alert(data);
$.each(data,function(i, item){//填充到二级下拉框
//alert(item.name);
???????????????? // $("<option value='"+item.mainid+"'>"+item.name+"</option>").appendTo(sel);
????????????????? var obj=document.getElementById('optionc');??
?
?????? //? 添加一个选项??
???????? obj.add(new??? Option(item.name,item.mainid));??
??????????????? });?
}
</script>
?
??????????? ?<select onchange="selectOnchangeb()" id="myselecta">
??????????? ?<option value=""></option>
??????????? ?<s:iterator id="useriterator" value="#request['CourseTypeBigTypes']" >
????<option value="<s:property value="mainid" />"><s:property value="name" /></option>????????
????</s:iterator>
??????????? ?</select>
??????????? ?
??????????? ?<select id="optionb" onchange="selectOnchangec()"><option value=""></option></select>
??????????? ?<select id="optionc" ><option value=""></option></select>
?
?
后台：
ibatis
<select id="getCourseTypeBigTypes" resultMap="courseTypeResultMap"
??parameterresultMap="courseTypeResultMap"
??parameter+ mid + "'>" + name + "</option>") ;
???listb.add(map);
??}
??
??
??JSONArray jsonArray = JSONArray.fromObject(listb);
??HttpServletResponse hsr = ServletActionContext.getResponse();
??//hsr.getWriter().write(selectoptions.toString());
??PrintWriter writer;
??try {
??writer = hsr.getWriter();
??writer.print(jsonArray);
??writer.flush();
??writer.close();
??} catch (IOException e) {
??// TODO Auto-generated catch block
??e.printStackTrace();
??}
??// return SUCCESS;
?}??
?
页面要调用 onload
?
<body onload="selectOnchangeb();">
?
daoimpl
:
?@Override
?public List getCourseTypeBigTypes() {
??List list = new ArrayList();
??list = this.getSqlMapClientTemplate().queryForList(
????"getCourseTypeBigTypes");
??return list;
?}
?@Override
?public List getCourseTypeSonTypes(String parentID) {
??// TODO Auto-generated method stub
??List list = new ArrayList();
??list = this.getSqlMapClientTemplate().queryForList(
????"getCourseTypeSonTypes",parentID);
??return list;
?}
?
?
这个功能花了我一天多时间
?
?
?
sql:
create table hulianType (
?? MainID?????????????? varchar(36)????????? not null,
?? Type_Name??????????? varchar(50)????????? not null,
?? Type_ParentID??????? varchar(36)????????? not null,
?? Type_CreateDate????? datetime???????????? not null,
?? Type_IsSystemDefine? int????????????????? null,
?? Type_Describe??????? text???????????????? null,
?? constraint PK_hulianType? primary key (MainID)
)
?
?
转载请注明作者 谢谢 如有不清楚的同学可以 QQ交流 6637152
自己支持下 有点乱 3 楼 macrotea 2011-10-22 浩男?通过zTree,无限级别联动 4 楼 zqb666kkk 2011-10-23 macrotea 写道浩男?
通过zTree,无限级别联动
恩 发个例子给我看看