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

Question

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

请帮忙？

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(); 
}
?>

Answer 1

我假设您的数据库中有一些关于公司的信息，例如 id、姓名、电子邮件和其他一些东西。您想从数据库中获取email 值并将其显示在输入字段中。我会使用data- 属性。例如data-email="company_a@gmail.com" 然后通过 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="company_a@gmail.com">Company A</option>
        <option value="Company_B" data-email="company_b@gmail.com">Company B</option>
        <option value="Company_C" data-email="company_c@gmail.com">Company C</option>
        <option value="Company_D" data-email="company_d@gmail.com">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>';