AJAX实现的简单的下拉框二级级联

最新推荐文章于 2022-03-12 08:00:00 发布

diven1201

最新推荐文章于 2022-03-12 08:00:00 发布

阅读量648

点赞数

分类专栏： JavaScript 文章标签： Ajax jQuery Chrome PHP EXT ViewUI

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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" οnchange="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>

diven1201

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX实现的简单的下拉框二级级联

AJAX实现的简单的无刷新效果，页面中有两个下拉框，当第一个下拉框改变时，提交请求到后台，查找到对应的数据，添加到第二个下拉框列表里。代码如下：&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; //Ajax实现下拉框二级级联，根据第一个下拉框的值改变第二个下拉框内的列表 ...
复制链接

扫一扫