|
锁定老帖子 主题：AJAX实现的简单的下拉框二级级联
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (4)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-05-28
最后修改：2010-05-28
AJAX实现的简单的无刷新效果，页面中有两个下拉框，当第一个下拉框改变时，提交请求到后台，查找到对应的数据，添加到第二个下拉框列表里。代码如下： <html>
<head>
<script type="text/javascript">
//Ajax实现下拉框二级级联，根据第一个下拉框的值改变第二个下拉框内的列表
//根据浏览器的类型，创建xmlHttpRequest对象
function createXmlHttpRequest()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if( window.XMLHttpRequest())
{
return new XMLHttpRequest();
}
}
var xmlHttpRequest;
//异步响应函数
function search(para)
{
var url="/search?para="+para; //后台请求的路径
xmlHttpRequest=createXmlHttpRequest();
xmlHttpRequest.onreadystatechange=callback; //将回调函数注册给状态改变事件
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
//回调函数
function callback()
{
var dlCity=document.getElementById("city");
//请求被成功响应，已接收到结果
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
var result=xmlHttpRequest.responseText; //返回的结果字符串
//var result = "哈尔滨|大庆||鹤岗|佳木斯|牡丹江";
var cityArray= result.split("|"); //返回的结果字符串中，值之间是以|分隔的，所以先拆分成数组
var count = cityArray.length;
dlCity.length=0; //先将下拉列表框清空
for (var i = 0; i <count; i++)
{
dlCity.options.add(new Option(cityArray[i], cityArray[i])); //将结果循环添加到下拉列表中
}
}
else
{
dlCity.length=0;
dlCity.options.add(new Option("请等待...","-1"));
}
}
//下拉框改变事件
function changeCityOptions()
{
var dlProvince=document.getElementById("province");
var dlCity=document.getElementById("city");
dlCity.length=0;
if(dlProvince.value==-1)
{
dlCity.options.add(new Option("城市列表","-1"));
}
else
{
search(dlProvince.value);
}
return;
}
</script>
</head>
<body>
<select name="province" id="province" onchange="changeCityOptions()">
<option value="-1">选择省份</option>
<option value="1">黑龙江</option>
<option value="2">吉林</option>
</select>
<select name="city" id="city">
<option value="-1">城市列表</option>
</select>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-05-31
楼主，建议使用jquery，弱弱的问一下，该代码在firfox下能执行吗？
|
| 返回顶楼 | |
|
发表时间：2010-05-31
省份也应该从数据库中读取出来。。
不过建议楼主使用jQuery |
| 返回顶楼 | |
|
发表时间：2010-05-31
最后修改：2010-05-31
最近抽空把N久以前的一个地区选择控件改良了一下，效果如上 用的是自己的一个AJAX类，调用非常简单
写道
(new Ajax()).get('./ajax_area.php?ajax=1&parent='+no,'area_'+(level+1),'',true);
|
| 返回顶楼 | |
|
发表时间：2010-06-01
类似这样的，以前用ext写过，还是蛮简单的
|
| 返回顶楼 | |
|
发表时间：2010-06-02
看来大家对jquery 还是满意的
|
| 返回顶楼 | |
|
发表时间：2010-06-02
用jquery和json会更简单些.当然,底层的原理还是要了解的
|
| 返回顶楼 | |
|
发表时间：2010-06-02
mp_juan 写道 楼主，建议使用jquery，弱弱的问一下，该代码在firfox下能执行吗？
firefox下也支持的.. 谢谢大家的建议，jquery确实不错，有空我会去研究下的。这个是个小练习，效果也很简单，大家请勿见笑。 |
| 返回顶楼 | |
|
发表时间：2010-06-02
似乎在Chrome下失效！
|
| 返回顶楼 | |
|
发表时间：2010-06-05
fyland 写道
最近抽空把N久以前的一个地区选择控件改良了一下，效果如上 用的是自己的一个AJAX类，调用非常简单
写道
(new Ajax()).get('./ajax_area.php?ajax=1&parent='+no,'area_'+(level+1),'',true);
这个挺漂亮的 贴源码啊 |
| 返回顶楼 | |
