我有一个简单的应用程序，你可以在这里看到：应用程序
在应用程序中，您将看到一个下拉菜单，只需从下拉菜单中选择一门课程，您将看到以下文本输入中显示的详细信息：
下面是应用程序的代码：
Javascript：
<script type="text/javascript">
$(document).ready( function(){
$('#coursesDrop').change( function(){
if( $(this).val() !== '' ){
var text = $(this).find('option:selected').text();
var split = text.split(' - ');
$('#currentCourseNo').val( split[0] );
$('#currentCourseName').val( split[1] );
$('#newCourseNo').val( split[0] );
$('#newCourseName').val( split[1] );
}
else{
$('#currentCourseNo,#currentCourseName,#currentDuration').val('');
$('#newCourseNo,#newCourseName,#newDuration').val('');
}
});
});
</script>
PHP/HTML：
<?php
// connect to the database
include('connect.php');
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
die();
}
?>
<h1>EDIT COURSE</h1>
<?php
$min_year = 1;
$max_year = 10;
$years = range($min_year, $max_year); // returns array with numeric values of 1900 - 2012
$durationHTML = '';
$durationHTML .= '<select name="duration" id="newDuration">'.PHP_EOL;
$durationHTML .= '<option value="">Please Select</option>'.PHP_EOL;
foreach ($years as $year) {
$durationHTML .= "<option>$year</option>".PHP_EOL;
if ($year != $max_year) {
$nextYear = $year + 1;
$durationHTML .= "<option>$year/$nextYear</option>".PHP_EOL;
}
}
$durationHTML .= '</select>';
$newCourseNo = (isset($_POST['CourseNoNew'])) ? $_POST['CourseNoNew'] : '';
$coursequery = "
SELECT CourseId, CourseNo, CourseName, Duration
FROM Course
ORDER BY CourseNo
";
$courseqrystmt=$mysqli->prepare($coursequery);
// You only need to call bind_param once
$courseqrystmt->execute();
$courseqrystmt->bind_result($dbCourseId,$dbCourseNo,$dbCourseName,$dbDuration);
$courseqrystmt->store_result();
$coursenum = $courseqrystmt->num_rows();
$courseHTML = '';
$courseHTML = '<select name="courses" id="coursesDrop">'.PHP_EOL;
$courseHTML .= '<option value="">Please Select</option>'.PHP_EOL;
while ( $courseqrystmt->fetch() ) {
$courseHTML .= sprintf("<option value='%s'>%s - %s</option>", $dbCourseId,$dbCourseNo,$dbCourseName) . PHP_EOL;
}
$courseHTML .= '</select>';
$courseform = "
<form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post' id='courseForm'>
<p><strong>Course:</strong> {$courseHTML} </p>
</form>";
echo $courseform;
$editsession = "
<form id='updateCourseForm'>
<p><strong>Current Course Details:</strong></p>
<table>
<tr>
<th>Course ID:</th>
<td><input type='text' id='currentCourseNo' name='CourseNocurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Course Name:</th>
<td><input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Duration (Years):</th>
<td><input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/> </td>
</tr>
</table>
<div id='currentAlert'></div>
<p><strong>New Course Details:</strong></p>
<table>
<tr>
<th>Course ID:</th>
<td><input type='text' id='newCourseNo' name='CourseNoNew' value='' /> </td>
</tr>
<tr>
<th>Course Name:</th>
<td><input type='text' id='newCourseName' name='CourseNamenew' value='' /> </td>
</tr>
<tr>
<th>Duration (Years):</th>
<td>{$durationHTML}</td>
</tr>
</table>
<div id='newAlert'></div>
</form>
";
echo $editsession;
?>
</body>
</html>
现在我有两个小问题都涉及课程的持续时间：
问题1：
在您选择课程后的应用程序中，您可以在“当前课程详细信息”部分下看到课程 ID 和课程名称文本输入已填写，但持续时间文本输入尚未填写。现在我可以' t 填写持续时间文本输入的方式与我为填写其他两个文本输入的编码方式相同，因为我没有也不想在下拉菜单中包含每门课程的持续时间。所以我的问题是，当从下拉菜单中选择课程时，为了能够填写所选课程的持续时间文本输入，正确和最佳的方法是什么？
问题2：
这类似于问题 1，但它处理“更新课程详细信息”部分中的持续时间的下拉菜单。我想要的是，当用户选择一门课程时，应在 Duration 下拉菜单中选择所选课程的持续时间。目前，在用户选择课程后，持续时间下拉菜单中仍然显示“请选择”
更新：
我已将 id='data' 添加到<td>{$durationHTML}</td>.
下面是javascript：
var data = document.getElementById('newDuration').value;
$('#coursesDrop').change(function()
{
var index = this.selectedIndex;
/* part 1 */
var data_to_display = data[index];
$('#data').text(data_to_display);
/* part 2 */
$('#durationDrop')[0].selectedIndex = index;
}).trigger('change');
上面的代码不起作用，因为它没有从所选课程的持续时间下拉菜单中选择持续时间。我做错了什么？
课程详情来自以下数据库：
课程表：
CourseId CourseNo CourseName Duration
1 INFO101 Information Communication Technology 3/4
2 INFO102 Computing 2
现在我的课程下拉菜单显示数据库中的课程信息，如下所示：
Please Select
INFO101 - Information Communication Technology
INFO102 - Computing
现在下面是持续时间下拉菜单的样子：
Please Select
1
1/2
2
2/3
3
3/4
4
4/5
5
5/6
6
6/7
7
7/8
8
8/9
9
9/10
10
现在，如果我在课程下拉菜单中选择以下课程：
INFO101 - Information Communication Technology
然后正如您在数据库中看到的，该课程的持续时间为，一旦用户在课程下拉菜单中选择了课程3/4，则持续时间下拉菜单应选择该选项。3/4INFO101 - ....
现在，如果我在课程下拉菜单中选择以下课程：
INFO102 - Computing
然后正如您在数据库中看到的，该课程的持续时间为，一旦用户在课程下拉菜单中选择了课程2，则持续时间下拉菜单应选择该选项。2INFO102 - ....
不明白的请给我评论：）
更新 2：
<?php
// connect to the database
include('connect.php');
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
die();
}
?>
<h1>EDIT COURSE</h1>
<?php
$min_year = 1;
$max_year = 10;
$years = range($min_year, $max_year); // returns array with numeric values of 1900 - 2012
$durationHTML = '';
$durationHTML .= '<select name="duration" id="newDuration">' . PHP_EOL;
$durationHTML .= '<option value="">Please Select</option>' . PHP_EOL;
foreach ($years as $year) {
$durationHTML .= "<option>$year</option>" . PHP_EOL;
if ($year != $max_year) {
$nextYear = $year + 1;
$durationHTML .= "<option>$year/$nextYear</option>" . PHP_EOL;
}
}
$durationHTML .= '</select>';
$newCourseNo = (isset($_POST['CourseNoNew'])) ? $_POST['CourseNoNew'] : '';
$coursequery = "
SELECT CourseId, CourseNo, CourseName, Duration
FROM Course
ORDER BY CourseNo
";
$courseqrystmt = $mysqli->prepare($coursequery);
// You only need to call bind_param once
$courseqrystmt->execute();
$courseqrystmt->bind_result($dbCourseId, $dbCourseNo, $dbCourseName, $dbDuration);
$courseqrystmt->store_result();
$coursenum = $courseqrystmt->num_rows();
$courseHTML = '';
$courseHTML = '<select name="courses" id="coursesDrop">' . PHP_EOL;
$courseHTML .= '<option value="">Please Select</option>' . PHP_EOL;
$courseInfo = array();
while ($courseqrystmt->fetch()) {
$courseHTML .= sprintf("<option value='%s'>%s - %s</option>", $dbCourseId, $dbCourseNo, $dbCourseName) . PHP_EOL;
$courseData = array();
$courseData["CourseId"] = $dbCourseId;
$courseData["CourseNo"] = $dbCourseNo;
$courseData["CourseName"] = $dbCourseName;
$courseData["Duration"] = $dbDuration;
array_push($courseInfo, $courseData);
}
$courseHTML .= '</select>';
$courseform = "
<form action='" . htmlentities($_SERVER['PHP_SELF']) . "' method='post' id='courseForm'>
<p><strong>Course:</strong> {$courseHTML} </p>
</form>";
echo $courseform;
$editcourse = "
<form id='updateCourseForm'>
<p><strong>New Course Details:</strong></p>
<table>
<tr>
<th>Duration (Years):</th>
<td id='data'>{$durationHTML}</td>
</tr>
</table>
</form>
";
echo $editcourse;
?>
< script type = "text/javascript" >
$(document).ready(function() {
var courseinfo = '<?php=json_encode($courseInfo);?>';
$('#coursesDrop').change(function() {
var courseId = $(this).val(),
coursedata;
for (var i = 0, l = courseinfo.length; i < l; i++) {
if (courseinfo[i].courseId = courseId) {
coursedata = courseinfo[i];
}
}
var index = $('#newDuration option[value="' + courseData.Duration + '"]').index('#newDuration option');
$('#newDuration')[0].selectedIndex = index;
});
});
< /script>