我们如何使用数据库动态更改一些下拉列表？答案

【问题标题】：How can we dynamically change a few dropdown lists using a database?我们如何使用数据库动态更改一些下拉列表？
【发布时间】：2012-04-29 20:03:33
【问题描述】：

尝试动态更改 mysql 数据库中的下拉列表值。脚本似乎可以工作，但我不确定。数据库列是id、columnA、columnB、columnC、columnD

在第二个下拉列表选择时，它会发出警报“再次嗨”。

$(document).ready(
function() {
$(".columnA").change(
function() {
    var dataA=$(this).val();
    var dataString = 'columnA='+ dataA;
    $.ajax (    {
                    type: "POST",
                    url: "ajax_try.php",
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {
                        $(".columnB").html(html);
                    }    
                }               
            );

            }
    );

$(".columnB").change(
function() {
    var dataB=$(this).val();
    var dataString = 'columnB='+ dataB;
    $.ajax (    {
                    type: "POST",
                    url: "ajax_try.php",
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {
                        alert("hi.. again");
                        $(".columnC").html(html);
                    }    
                }               
            );

            }
    );

});

<?php
include('db.php');
if($_POST['columnA'])
{
$columnA = $_POST['columnA'];

$sql = mysql_query("SELECT id, columnB FROM try WHERE columnA = '$columnA' GROUP BY columnB");

//$sql = mysql_query("SELECT id, columnB FROM try columnB WHERE columnA = '$columnA'");

while($row = mysql_fetch_array($sql))
{
$id = $row['id'];
$columnB = $row['columnB'];
echo '<option value="'.$id.'">'.$columnB.'</option>';

}
}


if($_POST['columnB'])
{
$columnB = $_POST['columnB'];

$sql = mysql_query("SELECT id, columnC FROM try WHERE columnB = '$columnB' GROUP BY columnC");

while($row = mysql_fetch_array($sql))
{
$id = $row['id'];
$columnC = $row['columnC'];
echo '<option value="'.$id.'">'.$columnC.'</option>';

}
}

?>

好的，我认为 html 代码更容易理解问题..

<html xmlns="http://www.w3.org/1999/xhtml">
....
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
.....
here is the script
...
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="10">
  <tr>
    <td width="15%"><span style="font-size:20px;">columnA</span></td>
    <td><span >
        <select size="1" id="columnA" title="" name="columnA" class="columnA"  style="width:250px; height:40px; font-size:20px; padding: 5px;">
            <option value="0" selected="selected">Choose..</option>
        <?php
            include('db.php');
            $sql=mysql_query("SELECT columnA FROM try GROUP BY columnA");
            while($row = mysql_fetch_array($sql))
            {
            //$id = $row['id'];
            $dataA = $row['columnA'];
            echo '<option value="'.$dataA.'">'.$dataA.'</option>';
            } 
        ?>
        </select>
        </span>
    </td>
  </tr>
  <tr>
     <td width="15%"><span style="font-size:20px;">columnB</span></td>
    <td>
        <select size="1" id="columnB"  title="" name="columnB" class="columnB" style="width:250px; height:40px; font-size:20px; padding: 5px;">
            <option value="0" selected="selected">Choose..</option>
        </select>
    </td>
  </tr>
  <tr>
     <td width="15%"><span style="font-size:20px;">columnC</span></td>
    <td>
        <select size="1" id="columnC"  title="" name="columnC" class="columnC" style="width:250px; height:40px; font-size:20px; padding: 5px;">
            <option value="0" selected="selected">Choose..</option>
        </select>
    </td>
  </tr>


</table>
</body>
</html>

【问题讨论】：

您能否更清楚地解释您遇到了什么问题？
制作一个简化的测试用例css-tricks.com/reduced-test-cases这是您自己解决问题的最简单方法。
@MartinBean 当我从 dropdownlist1(ddl1) 中选择第一个值时，它可以显示 ddl2 的值，但是当我从 ddl2 中选择一个值时，ddl3 什么也不显示。
@pikk 为什么你要打印 $row['columnB'] 当你要去 columnC 时。更好的方法是使用 firebug 看看控制台里面发生了什么。

标签： php javascript mysql dynamic drop-down-menu

【解决方案1】：

我很想在一个查询中选择表中的所有行，然后使用 JavaScript（或 jQuery）更改选择列表选项。这样可以节省 HTTP 请求，因为每次更改都会触发 AJAX 事件，如果用户更改选项 100 次，那么出于美观原因，这就是 100 个请求。

另一个好处是，如果用户由于某种原因没有 JavaScript 或连接速度很慢，那么选择列表仍然可用，否则它们将是空白的，因为它们没有被您的 AJAX 加载打电话。

【讨论】：

嗯，我想我的表有大约 1000-2000 条记录，它对我来说仍然是一个有用的选择吗？
我不明白为什么这些数字会影响它。一个数据库查询和一个 HTTP 请求比多个数据库调用和多个 HTTP 请求更可取。此外，您始终可以缓存数据库查询以备将来请求。
好的。我会根据你的建议重新组织我的代码。感谢您的帮助。

【解决方案2】：

while($row = mysql_fetch_array($sql)) {
   $id = $row['id'];
   $columnC = $row['columnC'];
   echo '<option value="'.$id.'">'.$columnC.'</option>';
}

您正在打印 columnB，而您应该打印 columnC

【讨论】：

在更改 B 列后显示 ajax 请求的输出，并删除 echo "deneme..";，因为我认为您的浏览器现在破坏了 html。
我想我找到了问题所在。我用这个 echo ''; 更改了 echo '<option value="'.$id.'">'.$columnC.'</option>'; 行