根据第一个下拉选择填充第二个下拉列表

Posted 2023-02-24

【中文标题】根据第一个下拉选择填充第二个下拉列表

【英文标题】：Populate 2nd Dropdown based on 1st Dropdown Choice

【发布时间】：2012-01-04 09:36:33

【问题描述】：

基本上，我想要完成的是当有人单击第一个 html 下拉列表 id="FirstDD" 时，基于选择的 option 第二个下拉列表 id="SecDD" 将填充与 FirstDD 下拉选择相关的字段.触发这一切是 ajax 进行初始调用和 php 从那里在subcategories.php 处理。

目前，正在发生的事情是：我选择了第一个下拉菜单，但 SecDD 中没有填充任何内容

JS/AJAX：

    <script type="text/javascript">
    $(document).ready(function()
    $("#FirstDD").change(function()
        $('#SecDD').load('inc/subcategories.php?scatID='+this.value);
        );
    );
    </script>

HTML

   <select style="width:300px;" id="FirstDD" name="userListingCategory">
                    <!--onchange="$('#SecDD').load('inc/subcategories.php?scatID='+this.value);"-->
                          <option  disabled="disabled">Category...</option>
                          <?php while($row = $sth2->fetch(PDO::FETCH_ASSOC))
                          echo "<option value=". $categoryID . ">" .$row['catName']."</option>";
                        unset($sth2);
                        ?>

                    </select> 
                   <select style="width:340px;" id="SecDD" name="userListingSCategory" style="display:none">
                    <?php require_once('inc/subcategories.php'); ?>
                    </div>
                    </select> 

Subcategories.php

<?php require_once('db/dbc.php');
#GET SELECT sub-category names
$pdo3 = new PDO($h1, $u, $p);
$pdo3->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sth3 = $pdo3->prepare("
SELECT scatID, scatName
FROM Category C, SubCategory SC
WHERE C.catID = SC.catID
;");
$sth3->execute(array());
?>

<option  disabled="disabled">Sub-Category...</option>
<?php
#Get subcats    
while($row = $sth3->fetch(PDO::FETCH_ASSOC))
echo "<option value=". $row['scatID'] . ">" .$row['scatName']."</option>";
unset($sth3);
?>

【参考方案1】：

诊断问题：

让 php 回显 this.value 以查看其内容是否符合您的预期。 使用您期望的内容运行 SQL 查询，看看它是否返回您期望的数据。

如果这两种方法每次都能正常工作，则说明没有触发，但代码似乎从这里开始运行。之后，我会尝试将 echo 语句放在你的行之间，看看它在哪里停止。

【讨论】：

我注意到，如果我在第一个下拉列表中选择一个选项，第二个下拉列表会清除，但随后不会填充任何内容，你想吗？

是否可以在查询SELECT scatID, scatName FROM Category C, SubCategory SC WHERE C.catID = SC.catID 中只包含 C.catID 的值，例如 $_POST['C.catID']，例如：SELECT scatID, scatName FROM Category C, SubCategory SC WHERE $_POST['C.catID'] = SC.catID ？

听起来您的查询没有返回任何记录。每次遍历结果集时，都会在下拉列表中回显一个额外的条目，因此您最终会得到“1”、[第一个条目]、“2”、[第二个条目]、“3”、[第三个条目]等作为您的理论下拉内容。如果它所做的只是将数字“1”放在下拉列表中，那么您知道它得到了那段代码，但结果中没有任何数据。如果您查询的信息量永远不会太大，您可以随时 SELECT * FROM SubCategory GROUP BY catID，将其转储到 JavaScript 数组中，然后在客户端进行过滤。

如果我在phpmyadmin 中测试查询SELECT scatID, scatName FROM Category C, SubCategory SC WHERE C.catID = SC.catID，它会输出信息。似乎问题出在 ajax/jquery: $('#SecDD').load('inc/php/subcategories.php?scatID='+this.value); 中。我这么说的原因是，如果我查看源代码，所有第一个和第二个下拉值都在加载中。

如果您自己运行查询可以获得您期望的记录，那么这会将 this.value 的内容作为源。将它放入一个变量中，然后将该变量回显到页面上，看看打印了什么。