ajax实现两个select下拉框的数据联动
ajax实现两个select下拉框的数据联动,要求根据第一个下拉式选择的内容联动第二个，并且第二个select中的数据要从数据库中得到。 --------------------编程问答-------------------- 网上不是有很多吗？？给第一个下拉列表 绑定onchang事件，来更新第二个下拉列表的选项。 --------------------编程问答--------------------我用js已经实现了，可是现在第二个select中的数据要求从数据库中提取。 --------------------编程问答-------------------- 那你前端框架用的什么，，异步获取数据库数据、。。、
--------------------编程问答-------------------- 第一个框的Onchange 不就给第二个下拉框获得选项数据了吗 --------------------编程问答-------------------- 真是怀疑LZ会不会用ajax --------------------编程问答-------------------- 预加载第一个select中的内容，然后js绑定第一个select的onchange事件，当选择了第一个select后就会进入onchange事件中，该事件中写ajax根据选中的值查询关联的第二个select。
搞定 --------------------编程问答--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var arr=new Array();
arr[0]=["--请选择--"];
arr[1]=["海淀区","朝阳区","昌平区","西城区","东城区","石景山区"];
arr[2]=["红旗街","重庆街","同志街","长春街"];
arr[3]=["海上公园","老虎滩","世界公园"];
function showOptions(str){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readystate==4&&xmlHttp.status==200){
document.getElementById("area").innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET","area.jsp",true);
xmlHttp.send();
var setObj = document.getElementById("area");
while(setObj.childNodes.length>0){
setObj.removeChild(setObj.firstChild);
}
var index=document.getElementById("city").selectedIndex;
var data=arr[index];
for(var i=0;i<data.length;i++){
var obj=document.createElement("option");
obj.innerHTML = data[i];
document.getElementById("area").appendChild(obj);
}
}
</script>
</head>
<body>
<form method="" action="">
<select id="city" onchange="showOptions(this.value);">
<option value="xz">--请选择--</option>
<option value="bj">北京</option>
<option value="cc">长春</option>
<option value="dl">大连</option>
</select>
<select id="area">
<option>--请选择--</option>
</select>
</form>
</body>
</html>
这是我之前写的... ... --------------------编程问答-------------------- 现在问题是什么呢？？
结果没出来？
var setObj = document.getElementById("area");
while(setObj.childNodes.length>0){
setObj.removeChild(setObj.firstChild);
}
可以这样
document.getElementById("area").length=0; 简单些
然后
for(var i=0;i<data.length;i++){
var obj=document.createElement("option");
obj.innerHTML = data[i];
document.getElementById("area").appendChild(obj);
}
可以在循环中拼接option字符串 。。。方便一点
比如：
strs += "<option value='xx'>xx</option>"
循环之后再指定整个select的innerHTML属性。
--------------------编程问答-------------------- 咋感觉直接用jqery 多省事呢，.ajax() 多方便
补充：Java , Java EE
