根据下拉选择 mysqli 自动填充文本输入字段

Question

我创建了一个下拉列表，该列表由我的 mysql 数据库中的数据填充并使用 php 进行编程。 我需要做的是根据下拉列表中的选择填充文本字段。 不幸的是，我的问题与本论坛上的其他问题不同，因为大多数人只是将所有选项输入到 html 表单中。 我的包含在一个表中，我不想将文本字段中的内容保存到我的数据库中......它仅供用户参考。

我已经阅读了本网站和许多其他网站上的大量论坛帖子，并尝试使用 jquery、javascript 和 ajax 脚本，但出于某种原因，我唯一能成功出现在文本字段中的是 id从下拉列表中选择的相应项目。 我认为重要的是要知道这两个字段都来自数据库中的同一个表，所以我无法弄清楚为什么自动填充该字段如此困难。 我想使用 javascript，因为我想要这个文件中的所有内容。

这是php形式的代码：

<?php
        '<div id="trxdetailstable">';

        echo '<table align="center" width="750px" cellspacing="0" border=".5px" ! important><tr>
         <th>Movie Title</th><th>Category</th><th>Price</th></tr>'; 
        echo '<td align="left" width="8%" height="25px">';
            $ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
            $ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");

            echo '<select class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
            while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){

                $categoryname = $ddlrow4['categoryname'];

            echo "<option data-categoryname='' value='".$ddlrow4['id']."'>" . $ddlrow4['title'] . "</option>";

            } //End while statement
            echo "</select>";
            echo '</a></td>';
            echo '<td align="left" width="10%">';
            echo '<input required id="categoryname" name="categoryname" type="text" readonly="readonly">';
            echo '</a></td>';

这是我目前在 html 头中的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这是当前未生成任何结果的代码（选择下拉项后文本字段留空）：

$('#dvdid').change(function(e){
    var optionChange = $('#dvdid option:selected').text();
    $('#categoryname').val(optionChange);
});
</script>

这是实际为我提供下拉列表中所选项目的主键 (id) 的代码（我希望它是类别名称）：

<script>
    function updatecat(id){
    if (id === "") {
        $("input[name=categoryname]").val("");
    } else {
        $("input[name=categoryname]").val(id);            
    }
}
</script>

我尝试了大约 3 个其他脚本，但它们都将文本（类别）字段留空。

任何意见，将不胜感激。 请记住，我的所有数据都是从非手动输入的数据库中生成的。 谢谢。

Answer 1

您有重复的行并且不使用ID属性，您可以使用这样的类：

$('select.dropdown').change(function(e){
    var optionChange = $(this).find('option:selected').text();
    $(this).closest("tr").find(".categoryname").val(optionChange);
});

你的 php 代码应该是这样的：

<?php
        '<div id="trxdetailstable">';

        echo '<table align="center" width="750px" cellspacing="0" border=".5px" ! important>
        <tr>
          <th>Movie Title</th>
          <th>Category</th>
          <th>Price</th>
        </tr>'; 
        echo '<tr>
        <td align="left" width="8%" height="25px">';
            $ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
            $ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");

            echo '<select class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
            while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){

                $categoryname = $ddlrow4['categoryname'];

            echo "<option data-categoryname='' value='".$ddlrow4['id']."'>" . $ddlrow4['title'] . "</option>";

            } //End while statement
            echo "</select>";
            echo '</a></td>';
            echo '<td align="left" width="10%">';
            echo '<input required class="categoryname" id="categoryname" name="categoryname" type="text" readonly="readonly">';
            echo '</a></td></tr>';

Answer 2

对于其他使用 html/php 并根据从他们的 mysql 数据库（并且只使用一个文件）中保存的数据提供的下拉列表中所做的选择来搜索自动填充文本字段的方法，这里是最终对我有用的：

在 html 头中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在 html/php 部分：

echo '<td align="left" width="8%" height="25px">';
            $ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
            $ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");

            echo '<select type="text" class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
            while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){

            echo "<option value='".$ddlrow4['id']."' data-categoryname='".$ddlrow4['categoryname']."'>" . $ddlrow4['title'] . "</option>";

            } //End while statement
            echo "</select>";
            echo '</a></td>';
            echo '<td align="left" width="10%">';
            echo '<input type="text" id="categoryname" name="categoryname" readonly="readonly" value="">';
            echo '</a></td>';

在文件末尾的 HTML 区域中：

<script>
$('#dvdid').change(function() {
    selectedOption = $('option:selected', this);
    $('input[name=categoryname]').val( selectedOption.data('categoryname') );
 });
</script>

我真诚地希望这可以防止其他人不得不经历我经历的反复试验和无休止的搜索和阅读。

Answer 3

伴侣。 我想问你，你的代码中的 $dbc 是什么？ 我的意思是： $ddlresult4 = mysqli_query($dbc, $ddlquery4) 或 die("Bad SQL: $ddlquery4");

它只在我的屏幕上显示一件事：Bad SQL: SELECT id, title, categoryname FROM dvd ORDER BY title ASC

没有下拉菜单，没有文本输入，只有这条错误的 SQL 消息。

感谢您的回答。 问候：多纳特