ajax完美解决的下拉框的onchange问题

苏苏苏苏小末丶

苏苏苏苏小末丶

2016-02-19 10:42

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享ajax完美解决的下拉框的onchange问题的教程,热爱PS的朋友们快点看过来吧!
即在触发地区下拉框的onchange事件时,代理商的下拉框选项也相应的改变,比如选择地区 湖南—〉长沙,那么代理商下拉框只显示长沙的代理商。

本来认为这个很好实现,但实际改起来的时候发现问题多多,主要问题是原有的地区联动是用js实现的,它的数据源是一个xml文件,当然如果下拉框是服务器端控件那么问题是很好解决的,现在是html控件一下子似乎还真有些不好改,想了几种办法实现起来都不理想,最后将思路转向用ajax来实现问题才迎刃而解,现在仔细一想,像这种情况似乎只有用ajax才能比较好的解决,如果是在地区下拉框的onchange事件里向后台进行一次提交,将地区下拉框的id传过去的话,实际上产生的回发会将地区联动下拉框重新初始化。

现在我具体谈谈这个ajax实现的过程。
首先页面当然需要定义一个下拉框的html控件。
代码如下:

select id="Agent" name="Agent"/select

接下来当然是定义XmlHttpRequest对象。
代码如下:

var xmlhttp;
function CreateXmlHttp()
{

//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}
catch(ex){}
}
}
}

这个在我的多篇blog文章里都有阐述,就不多说了。
接下来当然是利用该对象来发送条件,获得数据,并且将获得的数据绑定到agent这个下拉框。
在地区下拉框的onchange事件里面触发函数AjaxSend();

代码如下:

function AjaxSend()
{
//创建XmlHttpRequest对象
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttpRequest发生异常!");
return false;
}
//获取地区下拉框的value值,作为条件发送
var ss=document.getElementById("a2").value.substring(0,4);
}
//要发送的url,UserAjax我专门用来取数据
url="UserAjax.aspx?area="+ss;
xmlhttp.open("POST",url,false);

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
//清空原下拉框
document.getElementById("agent").options.length=0;
//str为返回的一个字符串,形式为"0001/代理商1,0002/代理商2,0003/代理商3"
var str=xmlhttp.responseText;
//将该字符串分割为数组形式
var strs=str.split(",");
document.getElementById("agent").options.add(new Option("----------","000000"));
for(var i=0;istrs.length-1;i++)
{
//获取value值(编号)
var a=strs[i].substring(0,strs[i].lastIndexOf("/"));
//获取绑定内容
var b=strs[i].substring(strs[i].lastIndexOf("/")+1,strs.length);
//绑定到下拉框
document.getElementById("agent").options.add(new Option(b,a));
}
}
}
}
xmlhttp.send();
}

另外顺便介绍一下UserAjax接收到该地区编号后获取数据返回字符串的过程。
代码如下:

string Area = Request.QueryString["area"].ToString();
DataTable data = "生成DataTable,涉及到公司核心代码,省略"
string aa = "";
for (int i = 0; i data.Rows.Count; i++)
{
if (aa == "")
{
aa = data.Rows[i]["id"].ToString()+"/"+data.Rows[i]["name"].ToString();
}
else
{
aa = aa + "," + data.Rows[i]["id"].ToString() +"/"+ data.Rows[i]["name"].ToString();
}
}
Response.Write(aa);

这样,一个比较棘手的问题用ajax就获得了完美解决,并且不会因向后台回发而导致下拉框初始化,导致选项改变,亲爱的朋友,看了这个例子,你对ajax是不是也有了
更好的认识呢?
展开更多 50%)
分享

猜你喜欢

ajax完美解决的下拉框的onchange问题

Web开发
ajax完美解决的下拉框的onchange问题

Ajax联动下拉框的实现例子

Web开发
Ajax联动下拉框的实现例子

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

ajax 自动完成下拉框 自动提示位置问题

Web开发
ajax 自动完成下拉框 自动提示位置问题

可输入的下拉框

Web开发
可输入的下拉框

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

动态提示的下拉框

Web开发
动态提示的下拉框

JavaScript 图标美化的下拉框

Web开发
JavaScript 图标美化的下拉框

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

关于表单的两点交互体验改进技巧

关于表单的两点交互体验改进技巧

Linux使用虚拟机安装Windows 10的方法

Linux使用虚拟机安装Windows 10的方法
下拉加载更多内容 ↓