显示来自php中依赖下拉列表的数据

时间:2017-07-23 19:04:05

标签: php jquery ajax drop-down-menu jscript

我需要帮助,我是php和jquery的新手 我创建了一个从mysql数据库填充的两层依赖下拉列表,它使用两个表product和fieldo with pid作为外键。

// dropdown.php的代码

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
</head><?php include "connectdb.php"; ?>
<script>
function getState(val) {
    $.ajax({
    type: "POST",
    url: "states.php",
    data:'pid='+val,
    success: function(data){
        $("#state-list").html(data);
    }
    });
}

function showMsg()
{

    $("#msgC").html($("SELECT name, email from fieldo where state = '#state-list option:selected'").text());
    return false;
}
</script>
<body >
    <form>
    <label style="font-size:20px" >Products:</label>
        <select name="product" id="product-list" class="demoInputBox"  onChange="getState(this.value);">
        <option value="">Select Products</option>
        <?php
         $sql="SELECT * FROM `Products` WHERE TYPE = 'BULK'";
         $results=$dbhandle->query($sql); 
        while($rs=$results->fetch_assoc()) { 
        ?>
        <option value="<?php echo $rs["pid"]; ?>"><?php echo $rs["Name"]; ?></option>
        <?php
        }
        ?>
        </select>


        <label style="font-size:20px" >State:</label>
        <select id="state-list" name="state"  >
        <option value="">Select State</option>
        </select>
        <button value="submit" onclick="return showMsg()">Submit</button>
    </form>

        Result: <span id="msgC"></span><br>

</body>
</html>

// states.php的代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">//alert("sdfsd");</script>
<body>
<?php
require_once("connectdb.php");
//$db_handle = new DBController();


    $query ="SELECT oid,state FROM fieldo WHERE pid = '".$_POST["pid"]."'";
    $results = $dbhandle->query($query);
?>
    <option>Select State</option>
<?php
    while($rs=$results->fetch_assoc()) {
?>
    <option value="<?php echo $rs["oid"]; ?>"><?php echo $rs["state"]; ?></option>
<?php

}
?>
</body>
</html>

此列表工作正常,但我想在选择状态时显示所述的其他列(电子邮件,姓名和联系人)。 它无法正常工作

2 个答案:

答案 0 :(得分:1)

您是否尝试过运行while循环而不破坏PHP脚本?看起来你几乎试图运行for循环。

<?php
    $sql="SELECT * FROM `Products` WHERE TYPE = 'BULK'";
    $results=$dbhandle->query($sql); 
    while($rs=$results->fetch_assoc()) { 
        echo '<option value="' . $rs["pid"] . '">' . $rs["Name"] . '</option>';

    }
?>

更新

好的,所以我听到了你的评论,我使用ajax电话来全面展示内容;我不确定你试图用showMsg()函数做什么。我假设你想要创建一个新的查询请求。

所以我改变了函数来创建一个Ajax调用,它看起来像这样:

<script>
function showMsg()
{
    var val;
    val = $("#state-list").val();
    $.ajax({
        type: "POST",
        url: "table.php",
        data: "state_id="+val,
        success: function(data){
            $("#msgC").html(data);
        }
    });
}
</script>

然后table.php将沿着这些方向......

<?php
// check to see if state_id has been submitted
if(isset($_POST['state_id']))
{
    $state_id = $_POST['state_id'];
}
// if it is not set, add something in place.
else
{
    $state_id = "1";
}

// query goes here - ask for the ID
$query = "SELECT name, email from fieldo where state = " . $state_id;

$results = $dbhandle->query($query);
while($rs=$results->fetch_assoc()) {

    //... create table with all content;

}

?>

答案 1 :(得分:0)

PHP无法对浏览器中发生的事情作出反应。一旦PHP处理了页面并且Web服务器已将其发送到浏览器,JavaScript就会接管。

这意味着如果客户选择新状态,它将不会自动让PHP使用匹配的电子邮件,名称和联系人填充页面的其余部分。你需要改变一下你的方法。

一种方法是使用Ajax。它会像这样工作:

  1. 在jQuery中,为状态下拉列表注册一个onChange事件处理程序。

  2. 当客户选择新状态时,将触发事件处理程序。在处理程序中,发出一个Ajax请求,将PHP发送到所选状态。

  3. 接收请求的PHP文档将查询来自数据库的匹配电子邮件,名称和联系人并发送结果,可能是作为JSON

  4. 回到jQuery处理程序,当数据从PHP服务器返回时(在响应回调中),使用该数据用正确的电子邮件,姓名和联系人填充页面。

  5. 另一种更简单的方法(如果你没有大量数据)是让PHP在页面加载时在多维数组中一次性发送所有数据。这次当用户选择一个新状态时,jQuery事件处理程序将在大数组中查找该状态下的数据,并用数据填充表单。