ajax 3联动 的问题
3联动可以实现。但是有小问题。当1、2级联动为selected默认时下一级获取不到数据。如
一级为省:1、河南 2、河北 3、 广东
二级为(河南的)市:1、郑州 2、新乡
三级 略
一级默认为河南,初始化进入页面后 点击河南 无反应,但点击河北或广东可联动出相应市
二级默认selected是第一个也就是郑州,点击郑州无反应,点其他可联动出对应县
这是为什么 怎么改呢
jsp页面为:
省:
<select name="op2" id="op2" onChange="OpSelectChange(this)" ></select>
市:
<select name="op2" id="op2" onChange="OpSelectChange(this)" ></select>
县:
<select name="op3" id="op3" onChange="this.value=this.options[this.selectedIndex].value;" ></select>
var request;
var OptionsName;
iniOptions();
//初始化第一个列表框
function iniOptions() {
OptionsName = "op1";
getNextOptions(""); //初始化第一个列表框
}
//创建求XMLHttpRequest对象
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("错误,无法请求XMLHttpRequest!");
}
//发送请求,获取下一个列表框的列表数据
//参数oValue为当前列表框的选中值,此值作为下一个列表框的parentID号
function getNextOptions(oValue) {
createRequest();
var url = "OptionServer.jsp?parentid=" + oValue;
request.open("GET", url, true);
request.onreadystatechange = opcallback;
request.send(null);
}
//回调函数
function opcallback() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText; //获取服务器返回的JSON字串
addOptions(response); //添加option选项
} else
alert("status is " + request.status);
}
}
//添加option选项
function addOptions(str) {
var jsonObj = eval(str);// JSON字符串转JSON对象
var opObj = document.getElementById(OptionsName);
clearlaterOP();
for (i = 0; i < jsonObj.length; i++) {
var TemOption = new Option(jsonObj[i].title, jsonObj[i].value); //定义一个选项对象
// if (i==i) TemOption.selected = "selected"; //设定第一项为被选项
opObj[opObj.length] = TemOption; //添加到列表
}
}
//清除所有当前及后继option的列表内容
function clearlaterOP() {
var obj = document.getElementById(OptionsName)
var nOp = Number(obj.id.substr(obj.id.length - 1, 1));
for (i = nOp; i <= 3; i++) {
var opTemp = document.getElementById("op" + i);
opTemp.length = 0;
}
}
//option的onchange事件
function OpSelectChange(obj) {
var s2 = document.getElementById("op2").value;
obj.value = obj.options[obj.selectedIndex].value;
OptionsName = "op" + (Number(obj.id.substr(obj.id.length - 1, 1)) + 1); //自动确定下一option的id号,为添加选项作准备
getNextOptions(obj.value);
}