根据下拉选择在文本框中显示值答案

【问题标题】：Show value in textbox based on dropdown selection根据下拉选择在文本框中显示值
【发布时间】：2021-07-01 11:20:22
【问题描述】：

我正在尝试根据选择值在文本框中显示值。例如，如果我从 select 元素中选择一个客户姓名，那么他的详细信息，如地址，电话号码需要在这些文本框中动态填写

这是 MySQL 表

表名称：客户

MYSQL 和 PHP

<?php
$select_customer = "select * from customer";
$select_customer_query = mysqli_query($connection, $select_customer); // Customer Data
?>

      <form method="post" action="">
      <div class="form-group">
      <select class="form-control" name="customer_name">
      <option>Customer Name</option>
      <?php while($customer_result = mysqli_fetch_assoc($select_customer_query)) { ?>
      <option><?php echo $customer_result['name']; ?></option>
      <?php } ?>
      </select>
      </div>
      <div class="form-group">
      <input type="text" class="form-control" placeholder="Phone Number">
      </div>
      <div class="form-group">
      <input type="text" class="form-control" placeholder="Website">
      </div>
      </form>

【问题讨论】：

你尝试了什么？一些javascript？
我知道这将在 jquery 和 ajax 的帮助下实现！但是当谈到 jquery @The_Death_Raw 时我不是很好
使用 JQuery AJAX 或者如果您对 jquery 不太满意，请使用 javascript fetch api 获取针对选定客户名称的数据，并相应地填充表单。
您必须在选择时使用onchange="methodName()"，才能获取所选选项的值。
谢谢@HassanMalik 我想通了！

标签： php jquery mysql

【解决方案1】：

你需要使用onChange来获取选择值改变时的值

要获取电话号码和网站等值，您可以将其他值作为属性添加到选项，然后进行更改

现在当 onChange 被调用时，您需要从选定的选项中获取该属性值并使用 jQuery 将它们设置在文本框中

  <form method="post" action="">
      <div class="form-group">
      <select class="form-control" name="customer_name">
      <option>Customer Name</option>
      <?php while($customer_result = mysqli_fetch_assoc($select_customer_query)) { ?>
      <option website="<?php echo $customer_result['website']; ?>" phone_number="<?php echo $customer_result['phone_number']; ?>" ><?php echo $customer_result['name']; ?></option>
      <?php } ?>
      </select>
      </div>
      <div class="form-group">
      <input id="phone_number" type="text" class="form-control" placeholder="Phone Number">
      </div>
      <div class="form-group">
      <input id="website" type="text" class="form-control" placeholder="Website">
      </div>
      </form>
<script>
$(document).ready(function () {     
$('select[name="customer_name"]').change(function(){
   var website = $('option:selected', this).attr('website');
   $("#website").val(website);
   var phone_number = $('option:selected', this).attr('phone_number');
   $("#phone_number").val(phone_number);
});
});
</script>

$('select[name="customer_name"]').change(function(){})

在这里它将通过使用其名称选择该元素来检测更改

$('option:selected', this).attr('website');

`这将通过名称获取属性，就像从选定选项中传递的当前网站一样

【讨论】：