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

Question

我試圖從下拉菜單（列表）中獲取值，並使用該值創建另一個下拉菜單。 我在mysql中有一個數據庫，該數據庫中是一個部門列表，然后每個部門都有一個課程列表。 我想做的是為已經創建的部門創建一個下拉列表，然后使用用戶選擇的值為課程創建一個下拉列表。

編輯：更新的代碼：

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

？>

Answer 1

如果您具有如下所示的select元素：

<!-- language: lang-html -->
     <input type="hidden" id="depthidden" name="depthidden">
     <select tabindex="3" id="Department">
        <option value="BSEN">BSEN</option>
        <option value="CPSC">CPSC</option>
        <option value="ENGG">ENGG</option>
      </select>

運行此代碼：

<!-- language: lang-js -->

    var d = document.getElementById("Department");
    document.getElementsById('depthidden').Value = d.options[d.selectedIndex].value;

以上只是一個可以幫助您的JS演示。

php部分：

$dname = mysql_real_escape_string($_POST['depthidden']);
while($dept= mysqli_fetch_assoc($result)) 
 {
    if($dname==$dept[dname])
       echo "<option value = '".$dept[dname]."' selected>".$dept[dname]."</option>";
    else
       echo "<option value = '".$dept[dname]."'>".$dept[dname]."</option>"; 
 }

$ dname是要填充的部門名稱。 否則，刪除if並保留else部分。

Answer 2

首先，將id / class添加到第一選擇中將很有幫助，例如：

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

您需要使用空選項設置第二個下拉列表，或設置與此類似的空div

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

然后可以使用與此類似的javascript文件：

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

然后就是這樣的php腳本：

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