使用 JQuery 和 PHP 的动态下拉列表的问题 - Problems with dynamic dropdown lists using JQuery and PHP

Problems with dynamic dropdown lists using JQuery and PHP

在我慢慢学习PHP的道路上，我决定开发一个动态下拉框，为我工作的小公司创建一个小的查找产品应用程序。我花了一天时间阅读其他人从他们的动态下拉框中放出的示例，并决定在 CSS-Tricks 上发布的方法足够干净和高效。

我

遇到的问题是我使用的Javascript似乎没有解析和返回我想要的东西。当我直接查询我的数据库（通过 Heidi）以及直接加载脚本（在底部解释）时，它应该构建的 MySQL 查询按预期工作，但使用 JQuery 通过脚本传递选项似乎不起作用。

这是我用来测试/构建脚本的带有下拉列表的主页

<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $("#type").change(function() {
            $("#range").load("dynoptions.php?type=" + $("#type").val());
        }).trigger("change");
    </script>
</head>
<body>
    <select id="type">
        <option selected value="base">Please Select</option>
        <option value="FM800">FM800</option>
        <option value="FS100">FS100</option>
    </select>
    <br>
    <select id="range">
        <option>Please choose from above</option>
    </select>
</body>

当我的第一个下拉列表的状态发生变化时，javascript 应该向我的 PHP 发送信息并接收 html 以注入到第二个下拉列表中。

这是PHP：

    <?php
        //creates DB connection
        $dbHost = 'localhost';
        $dbUser = 'foxmeter'; 
        $dbPass = 'foxmeter';
        $dbDatabase = 'foxmeter';
        $con = mysql_connect($dbHost, $dbUser, $dbPass) or trigger_error("Failed to connect to MySQL Server. Error: " . mysql_error());
        $result = array;
        mysql_select_db($dbDatabase) or trigger_error("Failed to connect to database {$dbDatabase}. Error: " . mysql_error());
        //prevents injections
        $choice = mysql_real_escape_string($_GET['type']);
        //forms the query
        $query = "SELECT DISTINCT sio FROM meters WHERE series='$choice' ORDER BY sio";
        $result = mysql_query($query);
        while ($row = mysql_fetch_array($result)) {
            echo "<option>" . $row{'sio'} . "</option>";
        }
    ?>

您可以在 new.foxmeter.com/dynamic.php此外，new.foxmeter.com/dynoptionswithselect.php?type=FM800 是 PHP 脚本的一个版本

<select> and </select>

在脚本之前和之后添加，以测试脚本是否正常工作（确实如此）。

谢谢！

change()侦听器永远不会被调用，可能是因为你试图在 DOM 准备就绪之前注册它。

你需要做的（以及通常使用 javascript 的良好做法）是在执行任何依赖于它的脚本之前确保 DOM 已准备就绪。

有几种方法可以做到这一点 - 一种是将脚本放在页面底部，但更好（更安全）的选择是使用 jQuery 的文档就绪事件处理程序：

$(document).ready(function(){
  //your code here
});

其简写是：

$(
  function(){
    //your code here
  }
);

所以在你的情况下：

<script>
    $(function(){
        $("#type").change(function() {
            $("#range").load("dynoptions.php?type=" + $("#type").val());
        }).trigger("change");
    });
</script>