ajax二级联动(选一个下拉表的值,另外两个多选框值也跟着改变)

Smhily 2012-05-10 12:41:44
我会:
选一个下拉表,另一个下拉表的值跟着变化

但是,现在想:
选一个下拉表,另外一个下拉表和两个多选框的值也跟着变化

请问如何实现好呢?

因为项目是这样的,选一个员工,要能看到第一层次管理他的人,和第二层次管理他的人,这些人会随员工的不同而不同的。
请问如何传值好呢?谢谢,谢谢。



附上,一对一的二级联动:
var req;
function chooseEmp()
{

var emp= document.getElementById('empId');

var url = "MagEmp?emp="+escape(emp.value);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
}

function callback()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
parseMessage();
}else{
alert("Not able to retrieve description"+req.statusText);
}
}
}

function parseMessage()
{
var xmlDoc=req.responseXML.documentElement;
var xSel=xmlDoc.getElementsByTagName('select');
var select_root=document.getElementById('magId');
select_root.options.length=0;

for(var i=0;i<xSel.length;i++)
{
var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
var xText=xSel[i].childNodes[1].firstChild.nodeValue;
var option=new Option(xText,xValue);
try{
select_root.add(option);
}catch(e){
}
}
}
...全文
583 11 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
Smhily 2012-05-11
  • 打赏
  • 举报
回复
谢谢大家的回复,结贴散分~~~


下面附几个参考地址,备以后查阅:
1) ajax,jquery,dwr等关系:
http://topic.csdn.net/u/20091230/14/c4a1148f-b926-4142-a41a-d9852bd15c7c.html

2) jquery+json:
http://blog.csdn.net/hanqunfeng/article/details/5299175#comments
懒得搭理你 2012-05-10
  • 打赏
  • 举报
回复
JQuery+Json吧,Json在后台组织好数据格式,javascript就能直接解析。
给你个,我现在项目用到的一个小例子,下拉列表框选择之后,下面表格内容自动更改。
//选择具体的某一船 
function changePro(){
shipName=$("#project").find("option:selected").text();
var shipNum = $("#project").find("option:selected").val();
if(shipNum==""){
$("#projectTab tbody tr").remove();
return;
}
//根据所选择的船号,利用JqueryAjax进行查询
//提交查询
var url = "<%=request.getContextPath()%>/WEB-ROOT/bid/award";
$.post(url, {
cmd:"queryship",
shid:"<%=sid%>",
shipnumber:shipNum
}, callBack, "json");
}
function callBack(json){
$("#projectTab>tbody>tr").remove();
//检查返回的结果是否返回error参数,如果返回error参数则表示查询出错
var len = json["list"].length;
if(len==0){
alert('对不起,该船暂时没有投标数据');
}
var choseText="";
for(var i=0;i<len;i++){
choseText +="<tr>";
var tdpreStr = "<td class='tablebody1' nowrap>";
var checkStr ="<input type='checkbox' name='check' value='"+json["list"][i].SID+"' onclick='sele(this,"+(i+1)+")' />";
choseText += tdpreStr+checkStr+"</td>"+tdpreStr+json["list"][i].SUNIT_BID+"</td>"
+tdpreStr+json["list"][i].SUSER_BID+"</td>"+tdpreStr+json["list"][i].NPRICE+"</td>"
+tdpreStr+json["list"][i].SCURRENCY+"</td>"+tdpreStr+"<span>"+json["list"][i].NNUMBER+"</span>"+"</td>"
+tdpreStr+json["list"][i].SMODE+"</td>"+tdpreStr+json["list"][i].SCUSTOMER+"</td>"
+tdpreStr+json["list"][i].SMEMO+"</td>"+tdpreStr+json["list"][i].STIME_BID+"</td>";
choseText +="</tr>";
}
$("#projectTab tbody").append(choseText);
}
Smhily 2012-05-10
  • 打赏
  • 举报
回复
非常非常感谢楼上的,很有启发.....
不是不是,项目一定要用这种ajax,我刚学会了这种而已...让大家见笑了....
a-shitou 2012-05-10
  • 打赏
  • 举报
回复
建议你返回数据是json类型的。。。可以自己组合,,,前台eval()去转换类型。。
还有啊,,,,你的项目非要用这种ajax吗?
给你个jquery的ajax
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/AP03002.do?param=initproject",
dataType: "json",
success: function(data)
{
var ret = data.mydata;
for(var i = 0; i < ret.length; i++)
{
var id = ret[i].id;
var name = ret[i].name;
$('#xmclass').append('<option value="'+id+'">'+name+'</option>');
}
},
error: function(msg)
{
// top.tabpanel.addTab({id: "error", title: "出错页面", html:'<iframe src="${pageContext.request.contextPath}/login.do?param=error" width="100%" height="100%" frameborder="0"></iframe>'});
}
});




jAVA



net.sf.json.JSONObject json = new net.sf.json.JSONObject();
JSONArray array = null;
net.sf.json.JSONObject member = null;

DaoOut out = DaoController.execute(D_projectS01Dao.class, null);
List list = out.getDataList();
if (list != null)
{
array = new JSONArray();
Iterator itr = list.iterator();
while (itr.hasNext())
{
member = new net.sf.json.JSONObject();
D_project info = (D_project)itr.next();
member.put("id", info.getProject_id()== null ? "" :info.getProject_id());
member.put("name", info.getProject_category()== null ? "" :info.getProject_category());

array.add(member);
}
}

json.put("mydata", array);
response.getWriter().write(json.toString());
response.getWriter().flush();
response.getWriter().close();
昨日凡阳 2012-05-10
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 的回复:]

引用 2 楼 的回复:

引用 1 楼 的回复:

不就多加两个多选框的值的改变吗?不看你代码了。。。怀疑你懂不懂你的代码,,,既然那个会,,再加十个百个改变也都差不多啊。。。


是的,跟你有级联动关系不大。举一反三。
建议使用jquery 或者dwr做,看着你这种ajax代码头疼。


请问juery和dwr比ajax来说,有什么优势吗?
[/Quote]

将ajax很多东西封装好了,简单容易使用。你不必关系底层的东西。
Smhily 2012-05-10
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 的回复:]

你parseMessage方法解析调用ajax返回xml文件,然后给下拉框赋值。
同理,1、ajax访问后台Action方法,方法里再加上一段把多选框需要的值写xml文件的代码
2、parseMessage解析xml文件后,先给下拉框赋值,然后再给多选框赋值
[/Quote]

谢谢...我试试去....
Smhily 2012-05-10
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 的回复:]

引用 1 楼 的回复:

不就多加两个多选框的值的改变吗?不看你代码了。。。怀疑你懂不懂你的代码,,,既然那个会,,再加十个百个改变也都差不多啊。。。


是的,跟你有级联动关系不大。举一反三。
建议使用jquery 或者dwr做,看着你这种ajax代码头疼。
[/Quote]

请问juery和dwr比ajax来说,有什么优势吗?
Smhily 2012-05-10
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 的回复:]

不就多加两个多选框的值的改变吗?不看你代码了。。。怀疑你懂不懂你的代码,,,既然那个会,,再加十个百个改变也都差不多啊。。。
[/Quote]

你批评得对,我是了解得不够透彻,只知道个大概,不知道解析xml如何分开赋值...
AlvinCross 2012-05-10
  • 打赏
  • 举报
回复
你parseMessage方法解析调用ajax返回xml文件,然后给下拉框赋值。
同理,1、ajax访问后台Action方法,方法里再加上一段把多选框需要的值写xml文件的代码
2、parseMessage解析xml文件后,先给下拉框赋值,然后再给多选框赋值
昨日凡阳 2012-05-10
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 的回复:]

不就多加两个多选框的值的改变吗?不看你代码了。。。怀疑你懂不懂你的代码,,,既然那个会,,再加十个百个改变也都差不多啊。。。
[/Quote]

是的,跟你有级联动关系不大。举一反三。
建议使用jquery 或者dwr做,看着你这种ajax代码头疼。
a-shitou 2012-05-10
  • 打赏
  • 举报
回复
不就多加两个多选框的值的改变吗?不看你代码了。。。怀疑你懂不懂你的代码,,,既然那个会,,再加十个百个改变也都差不多啊。。。

81,122

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧