根据数据列表选择的值更改文本框值 - PHP答案

【问题标题】：Change Text box value based on Data list selected value - PHP根据数据列表选择的值更改文本框值 - PHP
【发布时间】：2021-01-01 03:31:12
【问题描述】：

我创建了一个包含两列“id”和“names”的表，并在我的 PHP(html) 页面中添加了数据列表和文本区域来显示它，数据列表选项填充了“id”，我想要显示我在数据列表中选择的“id”的“名称”的文本区域。

  userid | name   |
   ----------------
    1    | name 1 |
    2    | name 2 | 
    3    | name 3 |
    4    | name 4 |

这是我的部分代码 -

<input list="uid" class="custom-select" id="dlist" name="dlist">
        <datalist id="uid">
        <?php
        $sql = "SELECT * FROM userdata";
        $result = mysqli_query($link, $sql);
        if (mysqli_num_rows($result) > 0) 
        {
        // output data of each row
          while($row = mysqli_fetch_assoc($result)) 
          { 
          echo'<option value="'. $row["userid"].'">';
          }
        } 
        ?>
         </datalist>
        <textarea class="form-control" id="uname" rows="4" name="uname"></textarea>

我查看了一些答案，其中一些人说要使用 ajax，但我还没有一个很好的例子来参考和完成我的代码。如果这已经解决，请评论答案链接。

【问题讨论】：

标签： php jquery ajax

【解决方案1】：

使用 Ajax。但是如果你坚持这个解决方案。你必须使用js jQuery 上的示例

    <select id="s">
      <option value="1">one</option>
      <option value="2" selected>two</option>
    </select>
    <textarea class="form-control" id="uname" rows="4" name="uname"></textarea>

<script>
$('#s').on('change', function(){ $('#uname').val( $('#s').val() ) })
</script>

【讨论】：

我认为这只是将选项值复制到文本区域，我希望文本区域值是数据库中“id”的“名称”
使用这个

【解决方案2】：

嗯，我已经让它以一种非常不同的方式工作，即data-value，并在这个答案的帮助下 - https://stackoverflow.com/a/48076273/14890948

<input list="uid" class="custom-select" id="dlist" name="dlist">
        <datalist id="uid">
        <?php
        $sql = "SELECT * FROM userdata";
        $result = mysqli_query($link, $sql);
        if (mysqli_num_rows($result) > 0) 
        {
        // output data of each row
          while($row = mysqli_fetch_assoc($result)) 
          { 
          echo'<option data-value="'. $row["name"].'"value="'. $row["userid"].'">';
          }
        } 
        ?>
         </datalist>
        <textarea class="form-control" id="uname" rows="4" name="uname"></textarea>


$("#dlist").on("change", function () {
    
   var value = $('#dlist').val();
      value = $('#uid [value="' + value + '"]').data('value');
      $('#uname').val(value);
      
    });

【讨论】：