0

在我慢慢学习 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>

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

谢谢！

4

1 回答 1

1

侦听器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>
于 2013-09-17T14:33:20.230 回答