将下拉菜单中的相关信息显示到文本框中（来自 SQL 数据库，使用 PHP、AJAX 和 HTML）

Posted 2023-05-08

【中文标题】将下拉菜单中的相关信息显示到文本框中（来自 SQL 数据库，使用 PHP、AJAX 和 HTML）

【英文标题】：Displaying Related Information From DropDown into Textbox (From SQL database, using PHP, AJAX AND HTML)

【发布时间】：2021-10-21 22:49:44

【问题描述】：

所以我可以使用数据库中的信息填充下拉列表，但是我需要做的是，当我单击下拉列表中的选项时，它应该在文本框中显示该选定选项的电子邮件。所以本质上，选择下拉菜单，选择公司，然后它从数据库中提取信息（电子邮件）并将其插入文本框

请帮忙？

php/html 页面

  <div class="customerInfo">
     <div class="blockSelect">
        <div class="select" style="margin-right: 5px;">
           <select name="cat" id="cat">
              <option value="" disabled selected>Customer</option>
              <?php
                 $records = mysqli_query($conn, "SELECT company FROM clients");
                    while($data = mysqli_fetch_array($records))
                                        
                   
                             echo "<option value='". $data['company'] ."'>" .$data['company'] ."</option>";  // displaying data in option menu
                    
                    ?>
           </select>
           <?php mysqli_close($conn);  // close connection ?>
        </div>
     </div>
     <div class="blockSelect">
        <input type="text" name="mail" id="mail" style="color: black; border-bottom: 1px solid;">
     </div>
  </div>

AJAX 代码

$('#cat').change(function()
var package = $(this).val();
$.ajax(
type:'POST',
data:package:package,
url:'get_details.php',
success:function(data)
   $('#mail').val(data);
 
);

get_details.php

<?php 

include("server.php"); 

if (isset($_POST['package'])) 
    $qry = "SELECT * FROM clients WHERE company=" . $_POST['package'];
    $rec = mysql_query($qry);
if (mysql_num_rows($rec) > 0) 
    while ($res = mysql_fetch_array($rec)) 
        echo $res['email'];
    

    die(); 

?>

【问题讨论】：

您的代码可用于 sql 注入 how-can-i-prevent-sql-injection-in-php 并且您还使用 mysql 和 mysqli 仅使用 mysqli

console.log 你 package 变量。它是否显示正确的价值？在你的 PHP 中使用 xdebug 或者如果你不使用 var_dump 变量来查看你在哪里得到了什么。如果我查看您的代码，您会返回 1 个结果，因此请在查询中使用限制 1，您也只需要电子邮件，因此您可以仅将查询中的 * 替换为 email，这样您获得的数据传输量就会减少您的数据库

谈谈代码格式...

@baracuda078，谢谢我根据需要进行了更改，但仍然遇到同样的问题。

给定的代码有什么问题？ 究竟是什么不起作用？您尝试过什么来解决问题？

【参考方案1】：

我假设您的数据库中有一些关于公司的信息，例如 id、姓名、电子邮件和其他一些东西。您想从数据库中获取email 值并将其显示在输入字段中。我会使用data- 属性。例如data-email="[e-mail]" 然后通过 javascript 获取该数据并将其显示在输入元素中。

请参阅下面的完整示例。

var mySelect = document.getElementById("cat");
mySelect.addEventListener("change", function() 
  var myOption = mySelect.options[mySelect.selectedIndex].getAttribute("data-email");
  document.getElementById('mail').value = myOption;
);

<div class="customerInfo">
  <div class="blockSelect">
    <div class="select" style="margin-right: 5px;">
      <select name="cat" id="cat">
        <option value="" disabled selected>Customer</option>
        <option value="Company_A" data-email="[e-mail]">Company A</option>
        <option value="Company_B" data-email="[e-mail]">Company B</option>
        <option value="Company_C" data-email="[e-mail]">Company C</option>
        <option value="Company_D" data-email="[e-mail]">Company D</option>
      </select>
    </div>
  </div>
</div>

<div class="blockSelect">
  <input type="text" name="mail" id="mail" style="color: black; border-bottom: 1px solid;">
</div>

所以在你注释掉如何做之后。您应该在 php 中添加更多代码。

当您使用 php 显示如下数据时，猜测您的数据库列是 company_email。

echo "<option value='". $data['company'] ."'>" .$data['company'] ."</option>";

用这个改变它。

echo '<option value="'.$data['company'].'" data-email="' . $data['company_email'] . '">' . $data['company'] . '</option>';

【讨论】：

好的，所以这个想法就在那里。我需要它从与该公司相关的数据库中提取电子邮件。所以当用户从下拉列表中选择一家公司时，它会自动用电子邮件地址填充一个文本框。

好的，这就是你想要的。我会更多的例子来回答

谢谢老兄！根据您的原始帖子调整 PHP 代码后，效果非常好。