手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
摘要:利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动下面是我的js文件原码:复制代码代码如下:varmail={//初...

利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动

下面是我的 js文件原码:

复制代码 代码如下:

var mail={

//初始化

init:{

//初始化数据

initdata:{

did:'',

ttitle:'',

sendpassword:'',

description:''

},

//初始化事件

initevent:{

DataEvent:function(){

$("#did").unbind("change");//获取一级菜单,绑定事件

$("#did").bind("change",function(){

//alert($(this).val());

mail.init.initdata.did=$(this).val();

//alert(mail.init.initdata.did);

mail.init.initevent.getuser();

});

},

<span>getuser:function(){

$.post("mailAction_showUsers?did="+mail.init.initdata.did,null,function(data){

var uidoption=$("#uid") ;//获取二级菜单

uidoption.empty();//将列表清空

for(var i=0;i<data.users.length;i++){

//向里面填充option,通过循环

uidoption.append("<option value="+data.users[i].uid+ " >"+data.users[i].username+"</option>" );

}

});</span>

},

submitCheck:function(){

$("#send").unbind("click");

$("#send").bind("click",function(){

mail.init.initdata.description=$("input[type='textarea']").text();

mail.init.initdata.sendpassword=$("input[name='sendpassword']").val();

mail.init.initdata.ttitle=$("input[name='ttitle']").val();

if(mail.init.initdata.sendpassword==""){

alert("请输入密码!");

return false;

}

else if(mail.init.initdata.ttitle==""){

alert("请输入主题!");

return false ;

}

else if(mail.init.initdata.description==""){

alert("请输入内容!");

return false;

}

else

return true;

});

}

}

}

}

$().ready(function(){

mail.init.initevent.DataEvent();

mail.init.initevent.submitCheck();

});

这是后台的action:

复制代码 代码如下:

private int did;

public String getDid(){

...

}

public void setDid(Strign did){

...

}

public String showUsers(){

users=(ArrayList<User>)this.userService.getUsersByDid(did);

System.out.println(users.size()+"...");

return SUCCESS;

}

struts.xml的配置:

复制代码 代码如下:

<package name="users" namespace="/" extends="json-default">

<action name="mailAction_showUsers" method="showUsers">

<result type="json"></result>

</action>

</package>

前台的jsp页面:

复制代码 代码如下:

<td width="65px">接收人</td>

<td> <s:select list="departmentlist" listKey="did" listValue="dname" id="did" name="did"></s:select>

<s:select list="users" listKey="uid" listValue="username" id="uid" name="uid"></s:select>

</td>

这个是 实现后运行的截图:

1

写给有需要的人。。。参考参考

【jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动】相关文章:

jQuery实现表格行上移下移和置顶的方法

jQuery实现的多屏图像图层切换效果实例

jQuery插件Slider Revolution实现响应动画滑动图片切换效果

JavaScript实现广告的关闭与显示效果实例

基于jQuery插件实现环形图标菜单旋转切换特效

jquery实现弹出层效果实例

jquery读取xml文件实现省市县三级联动的方法

jQuery实现返回顶部效果的方法

jquery实现图片左右切换的方法

jQuery实现鼠标经过图片变亮其他变暗效果

精品推荐
分类导航