php – 使用Ajax一次填充两个下拉列表

发布时间:2022-04-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了php – 使用Ajax一次填充两个下拉列表脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
我有三个 HTML DropDownList(< select>< option>< / option>< / select>).第一个DropDownList包含类别,第二个包含不同产品的子类别,第三个包含品牌(或制造商).

选择类别时,应根据传递给Ajax函数的类别ID,从数据库中一次填充两个下拉子类别和品牌.我正在使用以下Ajax代码.

function ajax()
{
    if(window.XMLHttPRequest)
    {
        xMLhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActivexObject("Microsoft.XMLHTTP");
    }
}

function getbrandList(selected)  //selected is the category id.
{               
    ajax();
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("brandList").innerHTML=xmlhttp.responseText;            
        }
    }

    xmlhttp.oPEn("GET","ajax/BrandAjax.PHP?selected="+selected,true);
    xmlhttp.send();     
    alert(selected);            
}

function getSubcategoryList(selected) //selected is the category id.
{                       
    getBrandList(selected); //First above function is invoked to populate brands.
    ajax();
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 &amp;& xmlhttp.status==200)
        {
            document.getElementById("subCategoryList").innerHTML=xmlhttp.responseText;                              
        }
    }

    xmlhttp.open("GET","ajax/SubCatAjax.PHP?selected="+selected,true);
    xmlhttp.send();             
}

选择类别时,将调用getSubcategoryList(选定)Javascript函数来执行Ajax请求.问题是我需要立即填充子类别和品牌下拉(当选择一个类别时).

它正在工作,并且根据传递的类别ID一次填充下拉列表(它是所选上述函数的参数).

我不必要地使用函数getBrandList()底部警告框.注释此警报框时,只会填充一个子类别的下拉列表.品牌仍然是空的.我不再需要这个警报框了.

为什么会这样?解决办法是什么

解决方法

seriyPS基本上达到了目标.问题实际上是xmlhttp变量.您需要在每个正在使用的函数中声明它是本地的.基本上,为函数调用创建一个闭包.然而,问题不一定是它需要“本地”,而是作为全局变量在第二个请求中重新定义.这基本上会终止初始请求,因为变量现在指向第二个请求.

警报框使其工作的原因是因为第一个请求正在完成ajax请求,然后才能“单击”确定. (警告框将暂停javascript执行,因此延迟第二个请求,直到您单击确定.)

解决此问题,您可以修改代码以为每个请求使用不同的变量.尝试将您的功能改为以下内容

// Global VARiables
var brandListRequest;
var subcategoryRequest;

function ajax()
{
    var xmlhttp; //!!
    if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActivexObject("Microsoft.XMLHTTP");
    }
    return xmlhttp; //!!
}

function getBrandList(selected)  //selected is the category id.
{               
    brandListRequest = ajax(); //!!
    brandListRequest.onreadystatechange=function()
    {
        if(brandListRequest.readyState==4 && brandListRequest.status==200)
        {
            document.getElementById("brandList").innerHTML=brandListRequest.responseText;            
        }
    }

    brandListRequest.open("GET",true);
    brandListRequest.send();     
    //alert(selected);            
}

function getSubcategoryList(selected) //selected is the category id.
{                       
    getBrandList(selected); //First above function is invoked to populate brands.
    subcategoryRequest = ajax(); //!!
    subcategoryRequest.onreadystatechange=function()
    {
        if(subcategoryRequest.readyState==4 && subcategoryRequest.status==200)
        {
            document.getElementById("subCategoryList").innerHTML=subcategoryRequest.responseText;                              
        }
    }

    subcategoryRequest.open("GET",true);
    subcategoryRequest.send();             
}

脚本宝典总结

以上是脚本宝典为你收集整理的php – 使用Ajax一次填充两个下拉列表全部内容,希望文章能够帮你解决php – 使用Ajax一次填充两个下拉列表所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。