<select id="test" name="test" onchange="doit(this,1);">
<option value="11">中国</option>
<option value="12">中国2</option>
</select>
function doit(obj,stage)
...{
//获取 下拉框 的显示内容
alert(obj.options[obj.options.selectedIndex].text);
//不可以使用 obj.text;
//获取 下拉框的值
// var pcatid = obj.options[obj.options.selectedIndex].value;
// 也可以 obj.value;
}
<script language=javascript>
window.onload=init;
function init()
...{
rescate();
}
function rescate()
...{
var res=document.getElementById('cate_1').options[document.getElementById('cate_1').options.selectedIndex].value;
if(document.getElementById('cate_2'))
res=document.getElementById('cate_2').options[document.getElementById('cate_2').options.selectedIndex].value;
if(document.getElementById('cate_3'))
res=document.getElementById('cate_3').options[document.getElementById('cate_3').options.selectedIndex].value;
document.getElementById("cate_res").value=res;
alert(res);
}
var level =0;
var seobj;
var xmlhttp ;
function doit(obj,stage)
...{
alert("调用了");
seobj=obj;
level=stage;
var pcatid = obj.options[obj.options.selectedIndex].value;
if (level>0)...{
if(level==1)
...{
document.getElementById("span_2").innerHTML="";
document.getElementById("span_3").innerHTML="";
}
else if(level ==2 )
...{
document.getElementById("span_3").innerHTML="";
}
if (pcatid > 0 )
...{
if( window.ActiveXObject)
...{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP")
}
else if(window.XMLHttpRequest)
...{
xmlhttp= new XMLHttpRequest();
}
var url="/member/ajax/bank.cgi?catid="+pcatid+"&thetime="+new Date().getTime();//设置处理页面和参数
alert('ajax');
xmlhttp.open("GET",url,false)//设置传参方式
xmlhttp.onreadystatechange=whenCompleted;//当状态改变时调用handname
xmlhttp.send(null);//执行
}
}
}


function whenCompleted()...{
var pointspan,tname,fun,poption,pval;
if (xmlhttp.readyState==4)//连接成功
...{ //alert(xmlhttp.status)
if (xmlhttp.status==200)//处理成功
...{
strValue=xmlhttp.responseText;
if(level ==1 )//第二级
...{
alert("完成函数的第二级");
pval = document.getElementById('cate_1').options[document.getElementById('cate_1').options.selectedIndex].value;
// if (pval==12)
// {poption="<option value='"+pval+"50'>综合</option>";}
tname =" name='cate_2' id='cate_2' ";
fun =" onchange=doit(this,2) ";//第二的ajax入口
pointspan = "span_2";
}
else if (level ==2 )//第三级
...{
pval = document.getElementById('cate_2').options[document.getElementById('cate_2').options.selectedIndex].value;
// if(pval.indexOf("12")==0)
// {
poption="<option value='"+pval+"'></option>";
// }
tname="name='cate_3'";
pointspan = "span_3";
fun = '';
}
if( strValue != "")
...{
var Strings = "<select " + tname + fun +" >"+ poption + strValue +"</select>";
document.getElementById(pointspan).innerHTML = Strings;
if(seobj.id=="cate_1" && document.getElementById("cate_2"))
...{
doit(document.getElementById("cate_2"),2);
}
}
}
}
}
</script>
本文介绍了一种使用JavaScript实现的下拉框联动效果,通过AJAX技术动态加载数据并更新下拉选项。根据不同层级的选择,可以调整后续下拉框的内容。文章详细解释了如何获取选中项的值和文本,并展示了如何根据选择触发不同级别的数据加载。
1万+

被折叠的 条评论
为什么被折叠?



