如何让依赖下拉列表工作？答案

【问题标题】：How do I get dependent dropdownlist to work?如何让依赖下拉列表工作？
【发布时间】：2013-12-24 01:18:57
【问题描述】：

我有 2 个 php 文件。一个叫做getCategory.php。该文件用于查询sql server数据库获取所有类别。

另一个叫做getSubCategory.php。

这会查询数据库以选择与类别关联的所有子类别。

categoryId是两者的关系键。

然后我有一个包含 2 个下拉列表的文件。

一个 id="cat_id" 而第二个下拉列表的 id 为 sub_cat。

我们的要求是您从类别下拉列表中选择一个选项，然后根据您从类别下拉列表中的选择填充第二个下拉列表（子类别下拉列表）。

我在过去使用 asp.net 和经典 asp 成功地做到了这一点。

我不确定如何让它与 php 一起使用。

至少对我来说特别困难的是类别和子类别位于两个单独的文件中，如上所述。

以下是我迄今为止设法整理的内容，但非常需要您的专家协助来帮助以正确的方式工作。

非常感谢。

<script type="text/javascript">
function getRecs()
{
    var httpxml;
    try
    {
        // Firefox, Opera 8.0+, Safari
        httpxml=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            httpxml=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                httpxml=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    function stateck()
    {
        if(httpxml.readyState==4)
        {
            //alert(httpxml.responseText);
            var myarray = JSON.parse(httpxml.responseText);
            var myarray=myarray.split(",");
            for(j=document.testform.subcat.options.length-1;j>=0;j--)
            {
                document.testform.subcat.remove(j);
            }


            for (i=0;i<myarray.length;i++)
            {
                var optn = document.createElement("OPTION");
                optn.text = myarray[i];
                optn.value = myarray[i];
                document.testform.subcat.options.add(optn);

            }
        }
    }
    var url="http://servername/path/getCategory.php";
    var cat_id=document.getElementById('cat_id').value;
    url=url+"?cat_id="+cat_id;
    url=url+"&sid="+Math.random();
    httpxml.onreadystatechange=stateck;
    //alert(url);
    httpxml.open("GET",url,true);
    httpxml.send(null);
}
</script>


</head>
<body>

    <h1>
       Requests
    </h1>

    <form>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">New Request</a></li>
    <li><a href="#tabs-2">Existing Request</a></li>
    <li><a href="#tabs-3">Request Details</a></li>
  </ul>
  <div id="tabs-1">
<div id="accordion">
  <h3>Location</h3>
  <div>
    <p>
       <div class="side-by-side clearfix">
        <div>
          <select name="cat_id" id="cat_id" data-placeholder="Choose a category..." class="chosen-select" style="width:500px;" onchange="getRecs();">
            <option value=""></option>
          </select>
        </div>
        <br />
        <div>
          <select name="sub_cat" id="sub_cat" data-placeholder="Choose a subcategory..." class="chosen-select" style="width:500px;">
            <option value=""></option>
          </select>
        </div>
        <br />
        <div data-role="content">
          <input type="text" name="address" id="address" value="  Enter a room..." onfocus="clearText(this)" onblur="restoreText(this)" style="width:493px;color:#999;font-size:9pt;height:20px;">
        </div>
      </div>
    </p>
  </div>

更新

BEGIN - 最新代码

<script type="text/javascript">
function getCats()
{
    var httpxml;
    try
    {
        // Firefox, Opera 8.0+, Safari
        httpxml=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            httpxml=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                httpxml=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    function stateck()
    {
        if(httpxml.readyState==4)
        {
            //alert(httpxml.responseText);
            var myarray = JSON.parse(httpxml.responseText);
            var myarray=myarray.split(",");
            for(j=document.reqform.subcat.options.length-1;j>=0;j--)
            {
                document.reqform.subcat.remove(j);
            }


            for (i=0;i<myarray.length;i++)
            {
                var optn = document.createElement("OPTION");
                optn.text = myarray[i];
                optn.value = myarray[i];
                document.reqform.subcat.options.add(optn);

            }
        }
    }
    var caturl="path/getCategory.php";
    caturl=caturl+"&sid="+Math.random();
    httpxml.onreadystatechange=stateck;
    //alert(caturl);
    httpxml.open("GET",caturl,true);
    httpxml.send(null);
}
</script>


<script type="text/javascript">
function getRecs()
{
    var httpxml;
    try
    {
        // Firefox, Opera 8.0+, Safari
        httpxml=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            httpxml=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                httpxml=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    function stateck()
    {
        if(httpxml.readyState==4)
        {
            //alert(httpxml.responseText);
            var myarray = JSON.parse(httpxml.responseText);
            var myarray=myarray.split(",");
            for(j=document.testform.subcat.options.length-1;j>=0;j--)
            {
                document.testform.subcat.remove(j);
            }


            for (i=0;i<myarray.length;i++)
            {
                var optn = document.createElement("OPTION");
                optn.text = myarray[i];
                optn.value = myarray[i];
                document.testform.subcat.options.add(optn);

            }
        }
    }
    var url="path/getSubCategory.php";
    var cat_id=document.getElementById('cat_id').value;
    url=url+"?cat_id="+cat_id;
    url=url+"&sid="+Math.random();
    httpxml.onreadystatechange=stateck;
    //alert(url);
    httpxml.open("GET",url,true);
    httpxml.send(null);
}
</script>


</head>
<body onload="getCats()">

    <h1>
       Requests
    </h1>

    <form name="reqform" method='POST' action='processRequest.php'>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">New Request</a></li>
    <li><a href="#tabs-2">Existing Request</a></li>
    <li><a href="#tabs-3">Request Details</a></li>
  </ul>
  <div id="tabs-1">
<div id="accordion">
  <h3>Location</h3>
  <div>
    <p>
       <div class="side-by-side clearfix">
        <div>
          <select name="cat_id" id="cat_id" data-placeholder="Choose a category..." class="chosen-select" style="width:500px;" onchange="getRecs();">
            <option value=""></option>
          </select>
        </div>
        <br />
        <div>
          <select name="sub_cat" id="sub_cat" data-placeholder="Choose a subcategory..." class="chosen-select" style="width:500px;">
            <option value=""></option>
          </select>
        </div>
        <br />
        <div data-role="content">
          <input type="text" name="address" id="address" value="  Enter a room..." onfocus="clearText(this)" onblur="restoreText(this)" style="width:493px;color:#999;font-size:9pt;height:20px;">
        </div>
      </div>
    </p>
  </div>

END - 最新代码

[{"BuildingDisplay":"132 Mitchell Street Tax Commissioner Office - 132 Mitchell St., SW","BuildingID":"B610012","Address":"132 Mitchell St., SW","City":"Jonesboro","District":"Central","Location":"B610012 132 Mitchell Street Tax Commissioner Office","State":"GA","StreetName":"132 Mitchell St., SW","Zip":"30303","X":2227970.4292704,"Y":1364292.9044986},{"BuildingDisplay":"34 Peachtree Street - 34 Peachtree St.","BuildingID":"B630012","Address":"34 Peachtree St.","City":"Jonesboro","District":"Central","Location":"B630012 34 Peachtree Street","State":"GA","StreetName":"34 Peachtree St.","Zip":"30303","X":2228810.0213674,"Y":1365970.5523757},.....

【问题讨论】：

你写的有什么问题？
@Barmar，两个问题。一，类别下拉列表没有被填充。二，我想像使用类别一样获取子类别的网址。这是类别：var url="http://servername/path/getCategory.php";，但我什至不确定我做对了，这可以解释为什么它没有填充下拉列表。非常感谢先生的回复。
getRecs 应该调用getSubCategory.php，而不是getCategory.php。您应该从window.onload 函数中调用getCategory.php。
@Barmar，您能帮先生处理一下 window.onload 位吗？
<body onload="getCats()"> 其中getCats() 是类似于getRecs() 的函数，但通过调用getCategory.php 填充cat_id。

标签： javascript php ajax json

【解决方案1】：

为什么不使用 jQuery？
在stateck() 中：您创建JSON.parse 以获取JSON 对象，但随后您执行split？
您能举例说明您的httpxml.responseText 是什么样的吗？

使用 jQuery，您的函数 getRecs() 将是：

function getRecs() {
    $.get( "getCategory.php", function( data ) {
      // I don't know your JSON Structure, but here you could make someting like:
      $.each(data, function(_key, _value) {
        var opt = $("<option/>");
        opt.attr("text", _value.text);
        opt.attr("value", _value.value);
        $("select").append(opt);
      });
    }, "json" );
}

【讨论】：

感谢您的回复。如果我能理解，您的 jQuery 可能会更好。您能否展示如何使用它来填充类别下拉列表以及子类别？
$.get() 向给定的（1. 参数）url 发出 HTTP GET 请求，如果此调用完成，将使用 @987654328 中的响应文本调用您的函数（2.参数） @ 多变的。 3. 参数 ("json") 表示data 中的响应不是文本而是 JSON 对象。因此，将getCategory.php 替换为getSubCategory.php，并将$("select").append(opt); 更改为$("#selectcat").append(opt); 和$("#selectsubcat").append(opt);，其中selectcat 和selectsubcat 是您的html 选择的ID。