javascript - 每次更改数据库下拉值时，文本框填充空值

Question

我有一个下拉框和一个文本框。我希望当我选择下拉值时，它将根据数据库下拉选择自动填充匹配的数据库文本框值。

这是我的代码:-

下拉菜单和文本框:-

<select name="product" required>
 <option value=""></option>
 <?php                          
  while($productRow = mysqli_fetch_assoc($productResult)){?>
  <option value="<?php echo $productRow['ID'];?>">
  <?php echo $productRow['Category']; ?></option><?php } ?>
</select>

<input placeholder="Phone Number" name="phoneNumber" id="pnum"  type="text">

脚本:-

 <script>
    $(document).ready(function(){
     $('select[name="product"]').change(function()
        {
     $('#pnum').val($('select[name="product"] option:selected').data('Mobile'));
        }

     );
     });

     </script>

现在，每次下拉值更改时，文本框都会填充空值。请多多帮助。

Answer 1

您需要将 html 更改为

<select name="product[]" size=20 multiple required>
 <?php                          
  while($productRow = mysqli_fetch_assoc($productResult)){?>
  <option value="<?php echo $productRow['ID'];?>">
  <?php echo $productRow['Category']; ?></option><?php } ?>
</select>

然后删除该脚本，因为不再需要它。所有项目的选择都是在<select>中完成的。元素。

在服务器端，您将获取产品数组中的值。