我正在建立一个网站,学生可以看到有关教授的统计数据。
以下是表格的代码
<?php
$pageName = "statisitcsForm.php";
$pageTitle = "Statistics Form";
include("../inc/config.php");
require(SITE_ROOT . "inc/db.php");
include(SITE_ROOT . "inc/header.php");
try {
$results = $db->query("
SELECT *
FROM professors
ORDER BY professorLastName");
$results2 = $db->query("
SELECT *
FROM majors
ORDER BY majorID");
} catch (Exception $e) {
echo "Data could not be retrieved from the database.";
exit;
}
$professors = $results->fetchAll(PDO::FETCH_ASSOC);
$majors = $results2->fetchAll(PDO::FETCH_ASSOC);
?>
<div id="statisticsFormBody">
<form action="../php/statistics.php" method="post">
<div class="form-div">
<h3><label for="major"> First Select Major: </label> <br></h3>
<select class="form-input" id="major" name="major">
<?php
foreach ($majors as $major) { ?>
<option value="<?php echo $major['majorID']; ?>"> <?php echo $major['majorName'] ?> </option>
<?php
} ?>
?>
</select>
</div>
<div class="form-div">
<h3><label for="prof"> Then Select Professor: </label> <br></h3>
<select class="form-input" id="prof" name="prof">
<?php
foreach ($professors as $prof) { ?>
<option
value="<?php echo $prof['professorID']; ?>"> <?php echo $prof['professorLastName'] . ' ' . $prof['professorFirstName'] ?> </option>
<?php
} ?>
?>
</select>
</div>
<div class="form-div">
<input type="submit" class="form-btn" id="Go" name="Go" value="Go">
<button type="reset" class="form-btn"> Clear</button>
</div>
</form>
</div>
<?php include SITE_ROOT . "inc/footer.php"; ?>
如何让第二个选择仅显示用户在第一个选择中选择的majorID
的教授?
professor.majorID
在数据库中引用majors.majorID。
也许是使用jquery(AJAX)的解决方案?
答案 0 :(得分:1)
感谢您提出问题。您可以采取的一种方法是为每个教授选项添加一个类,该选项指示与之关联的majorID,如下所示:
<div class="form-div">
<h3><label for="prof"> Then Select Professor: </label> <br></h3>
<select class="form-input" id="prof" name="prof">
<?php foreach ($professors as $prof) { ?>
<option class="major-<?php echo $prof['majorID']; ?>" value="<?php echo $prof['professorID']; ?>"> <?php echo $prof['professorLastName'] . ' ' . $prof['professorFirstName'] ?> </option>
<?php } ?>
</select>
</div>
然后使用jQuery将javascript change
事件绑定到第一个select并根据需要添加/删除选项:
<script>
$( document ).ready(function() {
profOptions = $("#prof option"); // store all options as a jQuery object
$("#major").trigger("change"); // trigger change on first select
});
$("#major").on("change", function() { // this event will fire anytime first select is changed
var majorID = this.value; // get value of first select
$("#prof option").remove(); // remove all professor options
profOptions.each( function() { // iterate through options
if ($(this).hasClass("major-" + majorID)) { // check if option has matching classname
$("#prof").append($(this)); // append option to second select
}
});
});
</script>
答案 1 :(得分:0)
你可以这样做:
<body>
<form>
<select id="major">
<option>Choose Major</option>
<option>Major1</option>
<option>Major2</option>
</select><br/>
<select id="profs" disabled>
<option>Choose Prof</option>
<option>Prof1</option>
<option>Prof2</option>
</select>
</form>
</body>
$('#major').on('change', function(){
if($('#major')[0].selectedIndex != 0){
$('#profs').prop("disabled", false);
} else {
$('#profs').prop("disabled", true);
}});
答案 2 :(得分:0)
使用jQuery中的ajax方法获取教授列表,并在ajax-query的callback-function中设置/取消设置元素的“disabled”属性。