dongsi7067 2014-12-15 03:47
浏览 46
已采纳

使用下拉列表html中的选定值

I am trying to get the value from a drop down menu (list) and use that value to create another drop down menu. I have a database in mysql, in that database is a list of departments and then each department has a list of courses. What I am trying to do is have a drop down list for the departments which I have already created and then use the value the user selected to make a drop down list for the courses.

EDIT: Updated code:

JavaScript dropmysql.js

<!-- start: Container -->
<div class="container">

  <!-- start: Contact Form -->
  <div class="title">
    <h4>Contact Form</h4>
  </div>

  <!-- start: Contact Form -->
  <div id="contact-form">

    <form method="post" action="assets/upload.php" enctype="multipart/form-data">

      <fieldset>
        <div class="clearfix">
          <label for="name"><span>Name:</span>
          </label>
          <div class="input">
            <input tabindex="1" size="18" id="name" name="name" type="text" value="">
          </div>
        </div>

        <div class="clearfix">
          <label for="email"><span>Email:</span>
          </label>
          <div class="input">
            <input tabindex="2" size="25" id="email" name="email" type="text" value="" class="input-xlarge">
          </div>
        </div>

        <div class="dropdown">
          <label for="department"><span>Department:</span>
          </label>
          <select tabindex="3" type="text" name="Department">
            <?php while($dept=m ysqli_fetch_array($result)) { echo "<option value=\" ".$dept['dname']."\ ">".$dept[ 'dname']. "</option>"; } //<option value="volvo">Volvo</option>
            ?>
          </select>
        </div>
        <div class="dropdown" id="course-container">
          <!-- SELECT WILL BE PLACED USING JAVASCRIPT -->
        </div>

        <div class="actions">
          <p>
            <label for="file"><span>Select file to upload:</span>
            </label>
            <input tabindex="8" type="file" name="fileToUpload" id="fileToUpload">
          </p>
          <p>
            <input tabindex="3" type="submit" value="Upload File" name="submit" class="btn btn-succes btn-large">
          </p>
        </div>

      </fieldset>
    </form>

  </div>
  <!-- end: Contact Form -->
</div>
<!-- end: Container -->
<!-- start: Java Script -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.8.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/flexslider.js"></script>
<script src="js/carousel.js"></script>
<script src="js/dropmysql.js"></script>
<script def src="js/custom.js"></script>
<!-- end: Java Script -->

PHP upload.php

<?php
    include ("../config/database.php");

    if (isset($_POST) && !empty($_POST)) {
        $department = $_POST['department'];

        $query = "SELECT * FROM courses WHERE dname = '{$department}'";

        while (mysql_fetch_assoc($query)) {
            echo '<option value="{$value}>{$name}</option>"'; // Loop through the database again and echo them here
        }
    }
?>

PHP ddown.php:

<?php
include ("../config/database.php");

if (isset($_POST) && !empty($_POST)) {
    $department = $_POST['department'];

    $query = "SELECT * FROM courses WHERE dname = '{$department}'";

    while (mysql_fetch_assoc($query)) {
        echo '<option value="{$value}>{$name}</option>"'; // Loop through the database again and echo them here
    }
}

?>

</div>
  • 写回答

2条回答 默认 最新

  • dongne1560 2014-12-15 04:16
    关注

    First it will be helpful to add an id/class to the first select such as:

    <select tabindex="3" type="text" name="Department" id="department">
        <option value="BSEN">BSEN</option>
        <option value="CPSC">CPSC</option>
        <option value="ENGG">ENGG</option>
    </select>
    

    You'll need to setup the 2nd dropdown list with empty options, or setup an empty div similar to this

    <div id="course-container">
       <!-- SELECT WILL BE PLACED USING JAVASCRIPT -->
    </div>
    

    Then a javascript file similar to this could be used:

    $(function() {
        var course_container = $("div#course-container");
        var data = {};
    
        $('select#department').change(function() {
            $(course_container).html("<select id=\"courses\"></select>");
            var courses = $("select#courses");
            var d = document.getElementById("department");
            data['department'] = d.options[d.selectedIndex].value;
    
            $.ajax({
                url: "path/to/php/script.php",
                type: "post",
                data: data,
                success: function(response) {
                    $(courses).innerHTML = response;
                }
            });
        });
    });
    

    Then just a php script like this:

    <?php
    
    if (isset($_POST) && !empty($_POST)) {
        $department = $_POST['department'];
    
        $query = "SELECT * FROM `DATABASE` WHERE `DEPARTMENT` = {$department}";
    
        while (mysql_fetch_assoc($query)) {
            echo '<option value="{$value}>{$name}</option>"'; // Loop through the database again and echo them here
        }
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 Python安装cvxpy库出问题
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题