[英]Using selected value from Drop down list 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. 我在mysql中有一个数据库,该数据库中是一个部门列表,然后每个部门都有一个课程列表。 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 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 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 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
}
}
?> ?>
If you have a select element that looks like this: 如果您具有如下所示的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>
Run this code: 运行此代码:
<!-- language: lang-js -->
var d = document.getElementById("Department");
document.getElementsById('depthidden').Value = d.options[d.selectedIndex].value;
The above is just a JS demo to help you. 以上只是一个可以帮助您的JS演示。
The php section: 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>";
}
The $dname is the dept name to be populated. $ dname是要填充的部门名称。 Otherwise, remove the if and keep the else part. 否则,删除if并保留else部分。
First it will be helpful to add an id/class to the first select such as: 首先,将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>
You'll need to setup the 2nd dropdown list with empty options, or setup an empty div similar to this 您需要使用空选项设置第二个下拉列表,或设置与此类似的空div
<div id="course-container">
<!-- SELECT WILL BE PLACED USING JAVASCRIPT -->
</div>
Then a javascript file similar to this could be used: 然后可以使用与此类似的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;
}
});
});
});
Then just a php script like this: 然后就是这样的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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.