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

Airo 发表于 Dev

爱乐

我试图从下拉菜单（列表）中获取值，并使用该值创建另一个下拉菜单。我在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
    }
}

？>

高个子乔纳森

首先，将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
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。