ajax完美解决 下拉框连动

使用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);
最完美的select下拉框美化 很多人为 select 的诸多不完善而头痛,如无法自定义样式、 IE6 中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件: UU 人下拉框   特点 1 :美化的并且可自定义的外观 UU 人下拉框使用 JS 进行渲染。当页面引入了脚本和 CSS 后,页面中的下拉框都会变成如下外观:精心开发5年的UI前端框架! 该外观是由 CSS 和图片控制。通过修改 CSS 可以很方便地实现 阅读详情

相关推荐

Django+Ajax+MySQL实现网页动态获取数据库数据(实例演示:省市二级联动下拉框的实现)

先填两个坑我最长时间的大坑: 一、Django的CSRF问题 相信大家刚使用Django+POST时都遇到过这个问题,报错提示如下: 怎么解决这个问题,网上一搜好几种方法,有些好使有些不好使,我也不赘述,可以参考http://www.qttc.net/201209211.html 我实测了注释settings.py下的'django.middleware.csrf.CsrfViewMi...

我重来的博客 9420

html select 下拉框ajax 请求

<meta charset="utf-8"> <select class="field" name="test" > <option value="1">信息一</option> <option value="2" selected="selected">信息二</option> <option va...

weixin_30315723的博客 1015

构建动态交互的Ajax多选下拉列表组件

本文还有配套的精品资源,点击获取 简介:Ajax Multiselect利用JavaScript和Ajax技术在网页上创建可交互的多选下拉列表,支持动态数据加载和无需页面刷新的用户体验。组件依赖于jQuery库来简化操作,并提供了丰富的配置选项和用户交互处理。本组件的使用方法包括引入依赖、设置HTML结构、初始化组件、设置数据源以及处理用户交互。开发者需注意兼容性、性能优化...

weixin_32925455的博客 865

extjs下拉框ajax,关于extjs中下拉框的change事件!

满意答案kkxccx022013.10.05采纳率:53%等级:13已帮助:13021人var store = new Ext.data.SimpleStore({fields:['value','text'],data:[['0','x'],['1','y']]})var combo = new Ext.form.ComboBox({fieldLabel:'选择',name:'combo...

weixin_42347882的博客 906

ajax实现动态下拉列表

自己jsp写的小实例,就两个jsp文件,一看就明白

AJAX实现的动态下拉列表框例子

AJAX实现的动态下拉列表框例子源代码 博文链接:https://qsrock.iteye.com/blog/171211

用AJAX实现联动下拉菜单(Cascading DropDownList Using AJAX)

原来一直以为只有.NET Framework 2.0才可以使用AJAX,但是同时也听说其实AJAX技术说到底并不是一个全新的技术而是对一些现有技术的新应用。以下这篇文章很好的解释了这个问题。(此文章英语原文可以见另外一篇文章--DropDown Box Using AJAX 或者你可以直接到这里查看原文)什么是AJAX?AJAX 是 Asynchronous JavaScript

vividboy的专栏 2862

ajax实现动态下拉框示例

本篇文章主要介绍了ajax实现动态下拉框示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

UI框架 最完美的select下拉框美化

最完美的select下拉框美化 很多人为select的诸多不完善而头痛,如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件:360UI即QUI下拉框( )   特点1:美化的并且可自定义的外观 QUI下拉框使用JS进行渲染。当页面引入了脚本和CSS后,页面中的下拉框都会变成如下外观: 该外观是由CSS和图片控制。通过修改CSS可以很方便地实现更改外

chentiedong的专栏 1859

Ajax动态为下拉列表添加数据的实现方法

1. 前台jsp,新建一个下拉控件 <select id="seldvd" onChange="sel_onchange(this)"></select> 2. js部分,建一个function方法,利用ajax,指向 ‘getAllTypes.action’ 的servlet部分,获取传来的下拉列表的数据,动态填充 <span xss=removed> </span>function loadType(){ <span xss=removed> </span>$.get( <span xss=removed>

C/C++关于VScode报错“终端将被任务重用,按任意键关闭”的解决方案

这其实不是一种报错,有这个提示的原因是本地端口是被共享的,所以必须关闭一个进程才能执行另一个,只需要对 tasks.json文件做一些修改即可。 报错时候 此时的tasks.json为: { "version": "2.0.0", "command": "g++", "args": ["-g","${file}","-o","${fileDirname}/${fileBasenameNoExtension}.exe"], // 编译命令参数 "problemMatche

Jerry Man的博客 6425

ajax完美解决的一个麻烦问题

最近老总提了一个小功能,在搜索网吧列表的时候加上网吧所属代理商这个条件,原有的搜索条件是一个地区二级联动,现在需要根据不同的地区显示不同的代理商集合。 即在触发地区下拉框的onchange事件时,代理商的下拉框选项也相应的改变,比如选择地区 湖南—〉长沙,那么代理商下拉框只显示长沙的代理商。 本来认为这个很好实现,但实际改起来的时候发现问题多多,主要问题是原有的地区联动是用js实现的,...

编程是技术,更是艺术。 190

SillyTavern 向量存储配置踩坑记:从卡死到本地部署 Ollama 跑通

用此命令看到镜像就算成功。

qq_62483451的博客 1259
上一篇: ajax 动态获取!实现站内消息提示!
下一篇: Ajax的原理和应用
codetian
博客等级 码龄20年 12粉丝 124原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值