根据先前的下拉值填充第三个菜单答案

【问题标题】：Populating the third menu based on previous dropdown values根据先前的下拉值填充第三个菜单
【发布时间】：2014-06-15 10:06:25
【问题描述】：

我有三个下拉菜单，前两个工作正常，第三个让我同样头痛。由于某种原因，一旦第二个下拉值发生更改，它就会失去第一个菜单的值。代码如下：

   <script language="javascript" type="text/javascript">
       function getXMLHTTP() { //function to return the xml http object
            var xmlhttp=false;  
            try{xmlhttp=new XMLHttpRequest();
            }
            catch(e){try{   xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
                }catch(e){
                    try{
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch(e1){
                        xmlhttp=false;
                    }}}
                return xmlhttp;
        }
        function getColor(CategoryId) {     

            var strURL="getColor.php?Category="+CategoryId;
            var req = getXMLHTTP();

            if (req) {

                req.onreadystatechange = function() {
                    if (req.readyState == 4) {
                        // only if "OK"
                        if (req.status == 200) {                        
                            document.getElementById('qcolor').innerHTML=req.responseText;                       
                        } else {
                            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                        }
                    }               
                }           
                req.open("GET", strURL, true);
                req.send(null);
            }       
        }

到这里为止，一切似乎都正常了，剩下的就是出了点问题，但不确定是什么：

function getBrand(CategoryId,ColorId) {     

    var strURL="getBrand.php?Category="+CategoryId+"&Color="+ColorId;
    var req = getXMLHTTP();

    if (req) {

        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('qbrand').innerHTML=req.responseText;                       
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }

}

HTML 代码：

 </head>
    <body>
    <div id="Quick_find_2">
             <div id="Quick_find_container">
               <form action="search2.php" method="get">
                 <div id="qcategory_1">Product</div>
                 <div id="qcategory">
                   <select name="Category" class="dropmenu" id="Category" onChange="getColor(this.value)">
                     <option value="">Any</option>
                     <option value="Keyboard"<?php if ($_GET['Category']=="Keyboard") {echo "selected='selected'"; } ?>>Keyboard</option>
                     <option value="Piano"<?php if ($_GET['Category']=="Piano") {echo "selected='selected'"; } ?>>Piano</option>
                   </select>
                 </div>

                 <div id="qcolor_1">Colour</div>
                 <div id="qcolor"><select name="Color" id="Color" class="dropmenu">
        <option value="">Select Color</option>
            </select>

                 </div>
                 <div id="qbrand_1">Brand</div>
                 <div id="qbrand"><select name="Manufacturer" class="dropmenu">
                     <option value="">Any</option> </select>

                 </div>

getColor.php

<? $Category= $_GET['Category'];
mysql_select_db($database_dconn, $dconn);
$query="SELECT DISTINCT Color FROM products WHERE products.Category LIKE '%$Category%'  AND Category!= 'Stage Pianos' AND Category!= 'Recent Pianos' AND Category!= 'Recent Keyboards' AND hidden ='no' ORDER BY Color";
$result=mysql_query($query);

?>
<select name="Color" onChange="getBrand(this.value)">
 <?php  
              echo '<option value="">Any</option>';
             while ($Color = mysql_fetch_array($result)) {
    $selected2 = $_GET['Color'] == $Color['Color'] ? 'selected' : '';
    echo '<option '.$selected2.'>' . $Color['Color'] . '</option>';
} ?>
</select>

这里是getBrand.php

<? $Category= $_GET['Category'];
$Color=$_GET['Color'];
mysql_select_db($database_dconn, $dconn);
$query="SELECT DISTINCT Manufacturer FROM products WHERE products.Category LIKE '%$Category%' AND Color = '$Color' AND Category!= 'Stage Pianos' AND Category!= 'Recent Pianos' AND Category!= 'Recent Keyboards' AND hidden ='no' ORDER BY Manufacturer";
$result=mysql_query($query);


?>
<select name="Manufacturer">
<option value="">Select Brand</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['Manufacturer']?>><?=$row['Manufacturer']?></option>
<? } ?>
</select>

这个输出使颜色正确，但是一旦更改为选中它就不会回显类别值，或者至少当我尝试进入 getBrand 文件时找不到它有没有办法发送这个值类别以及 getBrand 文件？

欢迎任何帮助

【问题讨论】：

这是a duplicate of your previous question吗？
（投票关闭另一个，因为那个没有答案）。

标签： php jquery mysql ajax

【解决方案1】：

在您的 getColor.php 文件中：

A：你没有在选项标签中传递 value 属性。

B：在getBrand 函数中，你得到两个变量；一个是CategoryId，另一个是ColorId，但是在品牌选择框的Onchange 函数中，您只传递了一个值THIS.VALUE。

修改后的代码：

<? $Category= $_GET['Category'];
mysql_select_db($database_dconn, $dconn);
$query="SELECT DISTINCT Color FROM products WHERE products.Category LIKE '%$Category%'  AND Category!= 'Stage Pianos' AND Category!= 'Recent Pianos' AND Category!= 'Recent Keyboards' AND hidden ='no' ORDER BY Color";
$result=mysql_query($query);

?>
<select name="Color" onChange="getBrand('<?php echo $Category; ?>',this.value)">
<?php  
          echo '<option value="">Any</option>';
         while ($Color = mysql_fetch_array($result)) {
$selected2 = $_GET['Color'] == $Color['Color'] ? 'selected' : '';

echo '<option '.$selected2.' value="'.$Color['Color'].'">' . $Color['Color'] . '</option>';
} ?>
</select>

【讨论】：

我明白这一点，但我不知道如何解决它，请您指出正确的方向，因为我确定这就是问题所在。
@Ria..现在试试这个
非常感谢，您简直不敢相信我一直在寻找答案。
@Vishal：无论您在哪里看到 SQL 注入，都值得在答案中指出。不过，我认为 OP 在这种情况下是知道的。