Javascript 使用php mysql jquery ajax动态更新选择框_Javascript_Php_Jquery_Mysql_Ajax

Javascript 使用php mysql jquery ajax动态更新选择框

javascript php jquery mysql ajax

Javascript 使用php mysql jquery ajax动态更新选择框,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,我试图通过PHP用PDO MySql的结果填充一个初始客户选择框。然后，我希望第二个联系人选择框更新与第一个框中所选内容相关的附加信息。我无法让第二个脚本运行。我认为问题出在我的ajax脚本中，因为PHP脚本单独运行时工作良好主脚本 <html> <head> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="t

我试图通过PHP用PDO MySql的结果填充一个初始客户选择框。然后，我希望第二个联系人选择框更新与第一个框中所选内容相关的附加信息。我无法让第二个脚本运行。我认为问题出在我的ajax脚本中，因为PHP脚本单独运行时工作良好

主脚本

 <html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#contact").change(function(){
                 var cid = $("#cid").val();
                 $.ajax({
                    type:"post",
                    url:"contact.php",
                    data:"cid="+cid,
                    success: function(data) {
                      $("#contact").html(data);
                    }
                 });
            });
       });
    </script>
 </head>
 <body>

    Campaign :
    <select name="customer" id="customer">
      <option>-Select a Customer-</option>
    <?php 
    include ("function.php");
  include("connect.php");
    $id = $_SESSION['profile']['id']; 
   foreach($db->query("SELECT * FROM customers WHERE pid = '$id'") as $row) {
        echo "<option value=" . $row['id'] . ">" . $row['name'] . "</option>";
}
        ?>
    </select>



    <select name="contact" id="contact">
        <option>-Select a Contact-</option>
    </select>
  </body>
</html>

联系人脚本

    include("connect.php");
$cid = $_POST["cid"];
foreach($db->query("SELECT * FROM contact WHERE cid = '$cid'") as $row) {
    echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';

也许您的第二个功能应该从客户更改开始

我看到您在ajax中使用了联系人选择，而不是您所描述的客户。不管您编写的代码如何，您使用了带有更改事件的联系人选择器，但是联系人选择框只包含一个值，它如何更改

<select name="contact" id="contact">
    <option>-Select a Contact-</option>
</select>

为什么不只是一个带有ID和名称的JSON响应呢

foreach($db->query("SELECT * FROM contact WHERE cid = '$cid'") as $row) {
    $arr[] = array("id" => $row['id'], "name" => $row['name']);
}
echo json_encode($arr);

然后在ajax响应中，您可以

$(document).ready(function () {
    $("#customer").change(function () {
        var cid = $("#customer").val();
        $.ajax({
            type: "post",
            url: "contact.php",
            data: {cid: cid},
            success: function (data) {
                var options = [];
                $.each(data, function () {
                    options.push('<option value="' + this.id + '">' + this.name + '</option>');
                });
                $("#contact").html(options.join(""));
            }
        });
    });
});

我改成了你建议的纸条，现在我甚至没有收到-选择一个联系人-我看到的只是一个向下箭头忽略我刚才说的我在联系人下拉列表中什么都没有，只是硬编码的东西。我只是注意到你的代码有其他问题。我将更新Answer在开发者工具中打开浏览器网络选项卡，并告诉我当您更改DropDownContact.php/notaryaccounting POST 200 OK text/html jquery-1.11.0.js:9666脚本379之一时json响应是什么样子 B 4 B 19 ms 19 太太

$(document).ready(function () {
    $("#customer").change(function () {
        var cid = $("#customer").val();
        $.ajax({
            type: "post",
            url: "contact.php",
            data: {cid: cid},
            success: function (data) {
                var options = [];
                $.each(data, function () {
                    options.push('<option value="' + this.id + '">' + this.name + '</option>');
                });
                $("#contact").html(options.join(""));
            }
        });
    });
});