下拉选择后自动填充文本字段

Posted

技术标签:

【中文标题】下拉选择后自动填充文本字段【英文标题】:Auto populating textfield after dropdown selection 【发布时间】:2016-07-08 08:46:15 【问题描述】:

我已经检查了有关此主题的所有内容,但没有任何东西可以帮助我解决我的问题。我对 php、Jquery、mysql 很陌生。 我想要实现的是在从下拉列表中选择一个项目后从数据库表中自动填充文本字段。数据库“依赖项”的名称。其中有一个名为“类别”的表,它有 3 列:id、name、description。 在下拉列表中,我希望能够从此列表中选择名称,然后将描述自动输入到文本字段中。我获得了工作下拉菜单,但我无法继续前进。

到目前为止,这是我的代码:

<?php

 try 

$objDb = new PDO('mysql:host=localhost;dbname=dependencies', 'admin', 'admin');
$objDb->exec('SET CHARACTER SET utf8');

$sql = "SELECT * 
        FROM `categories`
        ";
$statement = $objDb->query($sql);
$list = $statement->fetchAll(PDO::FETCH_ASSOC);

 catch(PDOException $e) 
echo 'There was a problem';


?> 
<head>
     <script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>

     <script type="text/javascript">

     $(document).ready(function() 
             
         $("#dropdownid").change(function()
             $('#textfieldid').val($("#dropdownid").val());
         );

      );
</script>
</head>
<body>

<label>List</label>
<select name="name" required id="dropdownid">
        <option value=""></option>
            <?php foreach($list as $row)  ?>
                    <option value="<?php echo $row['id']; ?>">
                    <?php echo $row['id']; ?> | <?php echo $row['name']; ?> | <?php echo $row['description']; ?>                        
                </option>
            <?php  ?>
</select>

<label>Text</label>
    <input name="description" type="text" id="textfieldid" value="">

</body>
</html>

我真的很感谢任何帮助。

【问题讨论】:

这个问题很模糊。您的答案中缺少什么? 我的问题是我不想从下拉列表中添加当前选中项的值($("#dropdownid").val()),因为它是'id ' 柱子。我需要的是,当我从下拉列表中选择某些内容时,根据选择,从表的“描述”字段中获取数据 【参考方案1】:

在body(

【参考方案2】:

Js

$(document).ready(function()       
         $("#dropdownid").on('change', function()
            var dropDownValue = $(this).val();
             $.ajax(
                type: 'POST',
                url: 'request.php',
                data: 
                    id_category: dropDownValue
                ,
                success: function (data) 
                    var result = JSON.parse(data);
                    if (result.result) 
                        var string = '';
                        $.each(result.list, function(key, value) 
                            string += value.field_name+' ';
                        );
                        $('#textfieldid').text(string);
                    
                
            );
         );
      );

request.php

 <?php
$result = true;
try 
    $objDb = new PDO('mysql:host=localhost;dbname=dependencies', 'admin', 'admin');
    $objDb->exec('SET CHARACTER SET utf8');

    $sql = "SELECT * 
        FROM `categories`
        WHERE id = :id_category
        ";
    $statement = $objDb->query($sql);
    // SIf it's integer.
    $statement->bindParam(':id_category', $_POST['id_category'], PDO::PARAM_INT);
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);
 catch(PDOException $e) 
    $result = false;

echo json_encode(compact('list', 'result'));
?> 

【讨论】:

感谢walkingRed,我想这就是我想要达到的目标。我试过你的,但是对于“string += value.field_name.”这一行。 ';"它在dreamweaver 中给了我一个语法错误,并且当我测试文本字段时没有被填充。可能是什么问题?在此先感谢您,我已经非常感谢您的帮助! 我现在更正了,错误消失了。但不幸的是,文本字段仍然是空的。 @bman1986 您是否使用正确的字段名称更改了field_name?您是否检查了界面的响应? 我将 field_name 更改为 description(这是数据库表中字段的名称),但没有成功。我真的不知道检查界面的响应是什么意思。上面的 Titans 帮助确实有效,但为此我需要将所有字段保留在下拉菜单的文本中,这不是最好的方法,所以最终的解决方案是如果我能以某种方式使您的版本正常工作。 @bman1986 如果您使用的是 chrome,请按 F12 打开 Developer tools。单击选项卡网络,然后单击 XHR 小选项卡。然后将下拉菜单中的字段更改为午餐请求。接下来选择您的请求的名称,瞧,您点请求数据

以上是关于下拉选择后自动填充文本字段的主要内容,如果未能解决你的问题,请参考以下文章

Laravel-从下拉列表中选择值后自动填充输入

从联系人中选择自动填充地址后,iOS UITextField 文本字段为空

根据下拉值自动填充文本框

Android 按钮自动填充搜索字段

Excel中设置下拉菜单并填充不同颜色

基于 Vue JS 中的选择下拉菜单自动填充输入