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

【问题标题】：dynamically updating select boxes with php mysql jquery ajax使用 php mysql jquery ajax 动态更新选择框
【发布时间】：2014-03-31 18:07:43
【问题描述】：

我正在尝试通过 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>';

【问题讨论】：

标签： javascript php jquery mysql ajax

【解决方案1】：

为什么不只是 encode 带有 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(""));
            }
        });
    });
});

【讨论】：

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

【解决方案2】：

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

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

之前的选择应该有多个可以改变的选项。或者我认为您的意思是#customer 联系方式如下：-

 $("#customer").change(function(){
                 //  your code;
            });

【讨论】：

【解决方案3】：

也许你的第二个函数应该从#customerchange 开始

【讨论】：