ajax二级联动(选一个下拉表的值,另外两个多选框值也跟着改变)解决办法
ajax二级联动(选一个下拉表的值,另外两个多选框值也跟着改变)
我会:
选一个下拉表,另一个下拉表的值跟着变化
但是,现在想:
选一个下拉表,另外一个下拉表和两个多选框的值也跟着变化
请问如何实现好呢?
因为项目是这样的,选一个员工,要能看到第一层次管理他的人,和第二层次管理他的人,这些人会随员工的不同而不同的。
请问如何传值好呢?谢谢,谢谢。
附上,一对一的二级联动:
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){
}
}
}
------解决方案--------------------
不就多加两个多选框的值的改变吗?不看你代码了。。。怀疑你懂不懂你的代码,,,既然那个会,,再加十个百个改变也都差不多啊。。。
------解决方案--------------------
------解决方案--------------------
你parseMessage方法解析调用ajax返回xml文件,然后给下拉框赋值。
同理,1、ajax访问后台Action方法,方法里再加上一段把多选框需要的值写xml文件的代码
2、parseMessage解析xml文件后,先给下拉框赋值,然后再给多选框赋值
------解决方案--------------------
------解决方案--------------------
建议你返回数据是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>'});
}
});
我会:
选一个下拉表,另一个下拉表的值跟着变化
但是,现在想:
选一个下拉表,另外一个下拉表和两个多选框的值也跟着变化
请问如何实现好呢?
因为项目是这样的,选一个员工,要能看到第一层次管理他的人,和第二层次管理他的人,这些人会随员工的不同而不同的。
请问如何传值好呢?谢谢,谢谢。
附上,一对一的二级联动:
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){
}
}
}
------解决方案--------------------
不就多加两个多选框的值的改变吗?不看你代码了。。。怀疑你懂不懂你的代码,,,既然那个会,,再加十个百个改变也都差不多啊。。。
------解决方案--------------------
------解决方案--------------------
你parseMessage方法解析调用ajax返回xml文件,然后给下拉框赋值。
同理,1、ajax访问后台Action方法,方法里再加上一段把多选框需要的值写xml文件的代码
2、parseMessage解析xml文件后,先给下拉框赋值,然后再给多选框赋值
------解决方案--------------------
------解决方案--------------------
建议你返回数据是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>'});
}
});