Ajax从下拉菜单更改内容不起作用

时间:2019-04-20 06:03:38

标签: javascript php jquery html ajax

我已经创建了一个网站。我已经在其中创建了一个下拉菜单,用于在用户选择不同的下拉菜单时显示不同的数据,我的代码如下

$(document).ready(function(){
// code to get all records from table via select box
$("#course_title").change(function() {
var tid = $(this).find(":selected").val();
var dataString = 'tid='+ tid;
$.ajax({
url: 'mycourses.php',
dataType: "json",
data: dataString,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.tid);
$("#emp_age").text(employeeData.training_name);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});
<select class="form-control sel" name="trainings" id="trainings" >
				  <option value="select options" selected disabled>Select Training Course</option>
<?                      $sql_trainings = "SELECT * FROM tbl_data";
                      $trainings_data = mysqli_query($con,$sql_trainings);
                      while($row = mysqli_fetch_assoc($trainings_data) ){
                          $trainingid = $row['tid'];
                          $training_name = $row['training_name'];


                          echo "<option value='".$trainingid."' >".$training_name."</option>";
                      }
                      ?>


					</select>

我还有另一个页面,如getcourses.php

<?php
include "config.php";

$trainingid = $_POST['tid'];   // department id

$sql = "SELECT tid,training_name FROM tbl_data WHERE id=".$departid;

$result = mysqli_query($con,$sql);

$users_arr = array();

while( $row = mysqli_fetch_array($result) ){
    $userid = $row['tid'];
    $name = $row['training_name'];

    $users_arr[] = array("tid" => $userid, "training_name" => $name);
}

// encoding array to json format
echo json_encode($users_arr);

该下拉菜单首先显示在页面中,然后当用户单击该下拉菜单时,将带他们到显示所选下拉菜单内容的其他页面,这是用户第一次单击该下拉菜单时显示的内容,被带到不同页面以显示内容,但是当用户从结果页面单击不同的下拉列表时,该下拉列表不起作用,则什么也没有发生,我想显示用户在结果页面中选择的下拉列表的内容,无论何时用户更改下拉菜单应该会出现。我的表名称是tbl_data,列是tid和training_name。

谁能告诉我我的代码出了什么问题?

1 个答案:

答案 0 :(得分:1)

Lazy<T>

应该是

$("#course_title").change(function() {

所以您的js代码应该像

$("#trainings").change(function() {