Question

在我慢慢学习PHP的道路上，我决定开发一个动态下拉框，为我工作的小公司创建一个小的find-a-product应用程序。我花了一天的时间阅读其他人从动态下拉框中提取的示例，并确定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>

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

谢谢！

Answer 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>

使用JQuery和PHP的动态下拉列表的问题

1 个答案: