如何使用ajax将下拉菜单链接到表格答案

【问题标题】：How to link drop-down menu to table using ajax如何使用ajax将下拉菜单链接到表格
【发布时间】：2018-04-04 09:33:30
【问题描述】：

我正在尝试根据下拉菜单中的选择填充一个 html 表格。即，当我从下拉菜单中选择一个选项时，它会显示一个表格，其中包含从数据库中获取的所选项目的描述，就像它获取该值的一行并将其显示在表格中一样。

现在，我必须使用 Ajax 和 Jquery，但我对 ajax 了解不多。

你能帮帮我吗？

这是我的代码：

$("#courses").change(function(){
  var course = $(this).val();
  $.ajax({
     url:'your php page url',
    type:'post',
    data:'course='+course,
    success:function(response){
    // your drop down box is in response
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="courses" id="courses" class="dropdownclass" ><option selected="selected" value="" disabled selected hidden >-- Select an option --</option>

<?php  
mysql_connect('localhost', 'root', '');
mysql_select_db('db');

$sql = "SELECT courses FROM table";
$result = mysql_query($sql);

while ($row = mysql_fetch_array($result)) {
    echo "<option value=' " . $row['courses'] ."'>" . $row['courses'] ."</option>";
}

?>

</select>

我不知道在 ajax 中添加什么以及在哪里放置表格并将其与下拉菜单链接。请帮我解决这个问题。

【问题讨论】：

要了解 Ajax 是如何工作的： 1/ 从前面，你得到你想要发送到你的 PHP 的值 - 2/ 然后你使用带有 url : 'your_script php' 和 data : {'key' : your_value} 的 Ajax 发送这个值 - 3 /从后面，在your_script.php你得到这个值：$value = $_POST['key']（如果你用type : 'post'发送你的Ajax值），然后你用这个$value来得到你想要的数据，然后你把它送回你的Ajax 调用echo $the_result_you_want; - 4/ 在成功部分的 Ajax 调用中，您使用此结果在您的选择中添加选项

标签： javascript php jquery html web

【解决方案1】：

这是实现您的功能的示例静态代码。您可以使用 sql 和 php 添加动态内容。

index.php

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="paragraph-div">
        <select id="courses">
            <option value="cource_1">Cource 1</option>
            <option value="cource_2">Cource 2</option>
            <option value="cource_3">Cource 3</option>
            <option value="cource_4">Cource 4</option>
        </select>
        <table id="myTable" border="1">

        </table>
    </div>
</body>
</html>
<script type="text/javascript">
$("#courses").change(function(){
    var course = $(this).val();
    $.post('data.php', {course: course}, function(response){
        // your drop down box is in response
        $("#myTable").html(response);
    });
});

</script>

数据.php

<?php

    $course = $_POST['course'];

    // Fetch data from db related to $course

    $html = '<tbody>
        <tr>
            <td>Course Name : </td>
            <td>Course 1 </td>
        </tr>
        <tr>
            <td>Course Description : </td>
            <td>Lorem ipsum Lorem ipsum Lorem ipsum</td>
        </tr>
    </tbody>';

    echo $html;
    die();
?>

希望现在一切都清楚了。

【讨论】：

在哪里添加html表格？
检查 sn-p 已更新。你在 dom 中使用 ajax append 获取数据
或者你只是将 ajax 结果中的值附加到 dom
在 url 中，我设置了我的表所在的 index.php 以及与您建议的代码相同的代码，但是当我运行它时，它显示表列名称而不选择下拉值，当我选择它只是显示所选值的值
在 index.php 中我添加了这个我已经发布的下拉代码，并且表格也在那个页面上