获取选择菜单以根据 MySQL SELECT 结果动态显示特定的选择选项答案

【问题标题】：get select menu to dynamically show specific select option based of MySQL SELECT result获取选择菜单以根据 MySQL SELECT 结果动态显示特定的选择选项
【发布时间】：2017-04-20 00:25:49
【问题描述】：

我有一个 php 页面，用户在文本字段中输入特定的 ID 号，然后单击“搜索”按钮。单击“搜索”后，将运行一个 php 脚本以连接到 MySQL 数据库表“xxx”并获取与用户输入的 ID 号匹配的行 ID。 SELECT 语句获取数据库值：标识行的“productionstage”和“floornotes”。

我需要做的是获取这些结果并将它们显示在我的表单页面上：

选择菜单需要动态显示与行的“productionstage”值对应的选项，然后文本区域需要显示“floornotes”中的值。

我的代码：

HTML：

<form id="workorderMovement" name='workorderMovement_form' action="workordermovementGET.php" method="post">



<fieldset id="userid">

<span>Welcome <?php echo $user ?> </span>

</fieldset> 




<fieldset id="sgnum">

<fieldset id="fieldset" style="text-align: center;"> 
    <span>Please enter the SG Number</span>
</fieldset>

<input type="text" name="sgnumber" id="sgnumber"> &nbsp;&nbsp;&nbsp; <input type="button" name="searchButton" id="searchButton" value="SEARCH">

</fieldset> 


<br/>
<br/>



<fieldset id="stageSelectField">

  <fieldset id="fieldset" style="text-align: center;"> 
    <span>Please select the Stage Completed</span>
  </fieldset>

<select name="stageSelect" id="stageSelect">
    <option value="Please Select">Please Select</option>
    <option value="Film Done">Film Done</option>
    <option value="Staged Done">Staged Done</option>
    <option value="Cleanroom Done">Cleanroom Done</option>
    <option value="GB2 Done">GB2 Done</option>
    <option value="Bagging Done">Bagging Done</option>
    <option value="Inspection Done">Inspection Done</option>
    <option value="LC Done">LC Inspection Done</option>
    <option value="IGU Done">IGU Done</option>
</select>

</fieldset> 


<br/>
<br/>


<fieldset id="floorNotesField">

  <fieldset id="fieldset" style="text-align: center;"> 
    <span>Please enter any new work order notes</span>
  </fieldset>

  <textarea type="text" name="floorNotes" id="floorNotes" class="floorNotesText"></textarea>

</fieldset>


<br/>
<br/>
<br/>

</form> <!-- End Work Order Movement Form -->

<fieldset id="doneButtonField">

  <input type="button" name="doneButton" id="doneButton" value="DONE">

</fieldset>

我的 AJAX：

         j("#searchButton").click(function(){


            //send Workorder Movement Data values to php using ajax.

                var sgnumber = j('#sgnumber').val();
                j.ajax ({
                    method: 'POST',
                    url: "workordermovementGET.php",
                    data: {sgNumber: sgnumber},
                    dataType: 'json',
                    success: function( data ){
                        if(data.status){
                            j("select#stageSelect option").filter(function() {
                                return j(this).val() == data.productionstage; 
                                }).prop('selected', true);
                                j("textarea#floorNotes").val(data.floornotes);
                            }

                    }
                 });

        });

我的 PHP：

include('inc.php');


//Get Table Options.
if (isset($_POST['sgNumber'])) {
    $sgNumber = $_POST['sgNumber'];

    //connect  to the database 
    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection
    if(mysqli_connect_errno() ) {
        printf('Could not connect: ' . mysqli_connect_error());
        exit();
    }

    $conn->select_db($dbname);

    if(! $conn->select_db($dbname) ) {
        echo 'Could not select database. '.'<BR>';
    }

    $sql= "SELECT productionstage, floornotes FROM invoices WHERE id = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param('i', $sgNumber);
    $stmt->execute();
    $stmt->store_result();     

    if ($stmt->num_rows == 1) {
        $stmt->bind_result($productionstage, $floornotes);
        $stmt->fetch();

        echo json_encode(array('status' => true, 'productionstage' => $productionstage, 'floornotes' => $floornotes));
    } else {
        echo json_encode(array('status' => false));
    }


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


//Free the result variable. 
 $result->free();


//Close the Database connection.
 $conn->close();


}//End If statement

?>

我需要知道如何正确地将我的 ajax 结果的一部分作为选择选项发布（数据库值将与预定义的选择选项之一匹配），并获取其余结果并显示在 textarea 中。另外，如果我能动态地做到这一点，那就完美了。

谢谢！

【问题讨论】：

您的代码中存在 SQL 注入漏洞！
是的，我知道。我正在同时研究如何避免这种情况......对于已知链接/教程的任何建议都非常感谢。谢谢！

标签： php mysql ajax drop-down-menu

【解决方案1】：

您需要对代码进行一些更改，例如：

您需要将结束 </form> 标记放在 DONE 按钮下方，如下所示：
```
    ...

    <fieldset id="doneButtonField">
        <input type="button" name="doneButton" id="doneButton" value="DONE">
    </fieldset> 
</form>
```
您的问题并未真正解释您打算如何使用此 DONE 按钮，但我相信您对此有所了解。然而，这个答案围绕 SEARCH 按钮以及相关的 jQuery/AJAX 和 PHP 功能。

按以下方式更改您的 jQuery/AJAX 脚本，

$("#searchButton").click(function(){
    var sgnumber = $('#sgnumber').val();
    $.ajax ({
        method: 'POST',
        url: "workordermovementGET.php",
        data: {sgNumber: sgnumber},
        dataType: 'json',
        success: function( data ){
            if(data.status){
                $("select#stageSelect option").filter(function() {
                    return $(this).val() == data.productionstage; 
                }).prop('selected', true);
                $("textarea#floorNotes").val(data.floornotes);
            }
        }
    });
});

它从下拉列表中选择一个特定的productionstage，并根据用户在输入文本字段中输入的id值填充floornotes数据。

最后，按以下方式处理您的 AJAX 请求，即您的 PHP 代码应如下所示：

<?php
    include('inc.php');

    if (isset($_POST['sgNumber'])) {
        $sgNumber = $_POST['sgNumber'];

        //connect  to the database 
        $conn = new mysqli($servername, $username, $password, $dbname);

        // Check connection
        if(mysqli_connect_errno() ) {
            printf('Could not connect: ' . mysqli_connect_error());
            exit();
        }

        $conn->select_db($dbname);

        if(! $conn->select_db($dbname) ) {
            echo 'Could not select database. '.'<BR>';
        }

        $sql= "SELECT productionstage, floornotes FROM invoices WHERE id = ?";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param('i', $sgNumber);
        $stmt->execute();
        $stmt->store_result();     

        if ($stmt->num_rows == 1) {
            $stmt->bind_result($productionstage, $floornotes);
            $stmt->fetch();

            echo json_encode(array('status' => true, 'productionstage' => $productionstage, 'floornotes' => $floornotes));
        } else {
            echo json_encode(array('status' => false));
        }
    }
?>

它使用prepared statement，因此您可以确定它对 SQL 注入攻击相当安全。此外，这是一个很好的阅读how you can prevent SQL injection in PHP?

【讨论】：

谢谢！到目前为止，这很有帮助。但是，我仍然看到我的选择菜单没有随着 ajax 的结果而改变。不过，我的文本区域运行良好。我的测试 ID 的选择菜单应更改为下拉选项“电影完成”，因为这是从数据库接收的数据。但是，它不会从列表中的第一个选项改变。
@rdimouro 在success 回调函数中执行alert(data.productionstage); 并查看您从服务器返回的值。
警报应返回“电影完成”。我似乎无法让选择菜单更改为相同的选项。可能是 .prop() 问题吗？
@rdimouro 那是因为您正在寻找 text 属性，而不是下拉列表的 value 属性。在成功回调函数中，将return $(this).val() == data.productionstage;这一行改成返回$(this).text() == data.productionstage;
@rdimouro 我的工作正常。您是否更改了 jQuery 代码 sn-p 中的任何内容？如果您更改了任何内容，请将您的 jQuery 代码 sn-p 粘贴到 pastebin.com 并在此处给我它的链接。此外，这个检索到的 productionstage 值是否与下拉列表的 value 或 text 部分匹配？

【解决方案2】：

您需要使用您的数据库结果和echo json_encode($your_array); 创建一个数组。这会将您的数据作为 JSON 对象返回给 Ajax 成功函数。然后，您可以解析该对象以获取 select 的数据和 textarea 的数据。我不记得您是如何使用 JS 更改所选选项的，但我知道它通常是 Google 搜索中的第一个或第二个链接/

【讨论】：