动态下拉列表php mysql ajax

时间:2017-11-19 18:29:24

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

我正在使用wampserver和它的php,我有2个主键coursetable,这些是主题和课程。主题可以是数学,cs(计算机科学)等。课程可以像306,307等,但它们都是varchar。我想创建3个下拉列表,其中2个链接。例如,如果我在第一个下拉列表中选择cs,第二个可以是300,306或307,但如果我在第一个下拉列表中选择数学主题,则课程可以是203或306.第三个下拉列表是等级,并且在任何地方都相同。问题是我无法获得https://www.youtube.com/watch?v=8UMCg2KQcsM视频或Dynamic dropdown list链接等主题和课程数据。任何人都可以帮我解决这个问题。

connection.php

<?php
$con = mysqli_connect('localhost', 'root', '123456', 'inputdatabase');
// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect:".mysqli_connect_errno();
} ?>

访问getdata.php

<?php
include_once "connection.php"

if(!empty($_POST["course"])){
  $course = $_POST["course"];
  $query = "SELECT * FROM coursetable WHERE subject = $course";
  $result = mysqli_query($con, $query);

  foreach($result as $coursetable){
  ?>
  <option value="<?php echo $coursetable["course"]; ?>"></option>
  <?php
  }
}?>

html的一部分 - 我添加了connection.php,这不是问题

                <select name="subject" onchange="getId(this.value);">
                    <option value="">Select course</option>
                        <?php
                        $query = "SELECT * FROM coursetable";
                        $results = mysqli_query($con, $query);

                        foreach ($results as  $coursetable){
                        ?>
                        <option value="<?php echo $coursetable["subject"];?>"></option>
                        <?php
                            }
                        ?>
                </select>

                <div class ="course">
                  <select name="course" id="courseList">
                    <option value=""></option>
                  </select>
                </div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
           </script>
                <script>
                  function getId(val){
                      $.ajax({
                        type: "POST",
                        url: "getdata.php",
                        data : { course : val },
                        success: function(data){
                          $("#courseList").html(data);
                        }
                      })
                  }
                </script>

0 个答案:

没有答案