Question

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

现在，我必须使用Ajax＆amp; Jquery，但我不太了解ajax。

你能帮我这个吗？

这是我的代码：

＆＃13;

$("#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
    }
  });
});

＆＃13;

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

＆＃13;

我不知道在ajax中添加什么以及在何处放置表格并将其与下拉菜单相关联。请帮助我。

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

data.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();
?>

希望现在很清楚。

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

1 个答案: