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

时间:2016-03-21 17:29:37

标签: php jquery mysql ajax drop-down-menu

我已经检查了这个主题的所有内容,但没有任何帮助我解决我的问题。我是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>

我真的很喜欢任何帮助。

2 个答案:

答案 0 :(得分:0)

在body的结束标记之后添加此内容(&lt; / body&gt;

<script type="text/javascript">

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

      });
</script>

并删除头部

- link_to 'Show', front_path(project)

答案 1 :(得分:0)

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