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

Question

我已经检查了有关此主题的所有内容，但没有任何帮助我解决问题的方法。 我是PHP，Jquery，MySql的新手。 我要达到的目的是在从下拉列表中选择一项之后，自动填充数据库表中的文本字段。 数据库“依赖项”的名称。 其中有一个表称为“类别”，它具有3列：ID，名称，描述。 在下拉列表中，我希望能够从名称列表中选择名称，然后自动在文本字段中获取描述。 我实现了工作下拉菜单，但是我无法继续前进。

到目前为止，这是我的代码：

<?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>

我真的很需要任何帮助。

Answer 1

在body的结束标记（</ body>

<script>
    $(function () {

        $('#dropdownid').on('change', function () {
            var selected_text=$( "#dropdownid option:selected" ).text();
            selected_text=selected_text.split('|');
            $('#textfieldid').val(selected_text[2]);
        });
    })
</script>

然后移开头部

<script type="text/javascript">

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

      });
</script>

Answer 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'));
?>