ajax完美解决 下拉框连动

ajax|解决|下拉

<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;i<strs.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);

时间: 2024-08-12 17:48:09

ajax完美解决 下拉框连动的相关文章

三级下拉框连动的数据库版

'三级下拉框连动''数据库:'location'表1 loaction  所在地表'   字段'   loactionid'   loactionname 名字'表2 district  所在的地区表'   字段'   locationid '    districtid'    districtname'表3 village  所在的县区表'   字段'   districtid '   villageid'   villagename <%Option Explicit%> <htm

数据-ajax 根据一个下拉框的值的不同 另一个下拉框对应显示的值也不同

问题描述 ajax 根据一个下拉框的值的不同 另一个下拉框对应显示的值也不同 图片就是这样的,项目的类别有商户和银行两种,我要根据选择商户还是银行,让下边对应的选择已有商户 的下拉框中显示不同的数据,数据都需要通过后台去数据库里查的. 这个是不是要ajax啊?谁能告诉告诉我怎么写 .急急急 ..在线等好心人..... 解决方案 html代码 <tr> <td style="width:15%"> 一级 </td> <td style="

php+ajax 仿google 下拉框代码一

php+ajax 仿google 下拉框代码一,这里php代码 <?php header('Content-Type:text/html;charset=utf-8'); require('../../admin/include/db_conf.php'); if($_POST['add']){     $keyword = trim($_POST['keyword']);     if(empty($keyword)){         header("LOCATION: suggest

php+ajax 仿google 下拉框代码三

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

AJAX实现联动下拉框的问题(求助~~~)

问题描述 三级联动下拉框的问题.因为要求不能刷新页面,而且下拉框的内容都是在数据库,动态的,所以要求用AJAX.下拉框数据通过AJAX取得和联动方面没有问题.现在的问题是,在页面提交的时候会出错.比如:初期:DDL1有一个空项和一项Level1,DDL2有一个空项画面上,DDL1选择Level1,AJAX取得对应的Level21和Level22,通过JavaScript添加到DDL2上面.如果选择Level21或者Level22,然后点击画面上面的一个提交按钮,页面就会报错.如果不对DDL2进行

经验技巧 用 iframe 解决下拉框与层之冲突

技巧|解决|下拉     问题提出:我用dw做了一个下拉菜单,但是碰到form的列表项就跑到下面去了,请帮忙解决,请看问题图示         解决问题:由于层与下拉框之间的优先级是:下拉框 > 层,因此在显示的时候,会因为优先级的次序而会出现如上问题.(如果几个元素都是层的话,我们可以通过层的 z-index 属性来设置)解决办法就是:给层中放一个优先级比下拉框更高的元素(iframe),从而解决此问题!具体解决代码如下: <div id="menu" style=&qu

用 iframe 解决下拉框与层之冲突

解决|下拉 问题提出:我用dw做了一个下拉菜单,但是碰到form的列表项就跑到下面去了,请帮忙解决,请看问题图示如下: 解决问题:由于层与下拉框之间的优先级是:下拉框 > 层,因此在显示的时候,会因为优先级的次序而会出现如上问题.(如果几个元素都是层的话,我们可以通过层的 z-index 属性来设置)解决办法就是:给层中放一个优先级比下拉框更高的元素(iframe),从而解决此问题!具体解决代码如下: <div id="menu" style="position:

用iframe解决下拉框与层之间的冲突

笔者用dw做了一个下拉菜单,但是碰到form的列表项就跑到下面去了,请帮忙解决,请看问题图1示. 图1 网页中下拉框与层之冲突 由于层与下拉框之间的优先级是:下拉框 > 层,因此在显示的时候,会因为优先级的次序而会出现如上问题.(如果几个元素都是层的话,我们可以通过层的 z-index 属性来设置)解决办法就是:给层中放一个优先级比下拉框更高的元素(iframe),从而解决此问题!具体解决代码如下: <div id="menu" style="position:a

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

下拉提示跟着 MOuse 走的..想把他改成在文本框下出来的那种怎么改   日期 制造号码 作业内容