[英]How to clear text inputs if user selects “Please Select” option from drop down menu?
在下面,我有一个下拉菜单:
$courseHTML = '';
.... //sql code to perform query goes here
$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>';
以下是html表格,它将在表格中显示该课程的当前详细信息:
$editcourse = "
<form id='updateCourseForm'>
<p><strong>Current Course Details:</strong></p>
<table>
<tr>
<th></th>
<td><input type='hidden' id='currentCourseId' name='CourseIdcurrent' value='' /> </td>
</tr>
<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>
</form>
";
我下面有一个jquery代码,根据从下拉菜单中选择的选项,它在上面的文本输入中显示详细信息。 它将用细节填充文本输入没有问题。 但是我的问题是,如果用户在下拉菜单中选择“请选择”选项,那么所有的文本输入都应该为空。 问题是尽管我处于“ PLease Select”选项中,它仍然在文本输入中显示信息。
如果从下拉菜单中选择了“请选择”选项,那么我需要在下面的代码中进行哪些更改才能使文本输入空白?
$(document).ready( function(){
var courseinfo = <?php echo 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 currentindex = $('#currentDuration').val(coursedata.Duration);
var editindex = $('#newDuration').val(coursedata.Duration);
var currentid = $('#currentCourseId').val(coursedata.CourseId);
var editid = $('#newCourseId').val(coursedata.CourseId);
if( $(this).val() !== '' ){
var text = $(this).find('option:selected').text();
var split = text.split(' - ');
$('#currentCourseNo').val( split[0] );
$('#currentCourseName').val( split[1] );
}
else{
$('#currentCourseNo,#currentCourseName,#currentDuration,#currentCourseId').val('');
}
});
});
问题:
出现错误,当我再次选择“ PLease”选择选项时,错误控制台中会显示该错误,错误指出此行上的课程数据未定义
var currentindex = $('#currentDuration').val(coursedata.Duration);
说明:
当您选择“ please select”时,courseId为空白,因此在for循环内永远不会满足if条件,因此永远不会设置coursedata。
解:
首先检查有效的选择(不是“请选择...”),然后再进行工作。 我还重新组织了JS的其他部分,因此更有意义。
$(document).ready(function () {
var courseinfo = <? php echo json_encode($courseInfo); ?> ;
$('#coursesDrop').change(function () {
var courseId = $(this).val();
/*
You only need to do all of this if user selects a course, so check that first.
*/
if (courseId !== '') {
/*
Iterate over courses and, if the one we want exists, populate its info.
*/
for (var i = 0, l = courseinfo.length; i < l; i++) {
if (courseinfo[i].CourseId == courseId) {
$('#currentDuration').val(courseinfo[i].Duration);
$('#newDuration').val(courseinfo[i].Duration);
$('#currentCourseId').val(courseinfo[i].CourseId);
$('#newCourseId').val(courseinfo[i].CourseId);
var text = $(this).find('option:selected').text();
var split = text.split(' - ');
$('#currentCourseNo').val(split[0]);
$('#currentCourseName').val(split[1]);
/*
Without this break, the loop will continue until i = l.
We've already found our match, no need to continue.
*/
break;
}
}
} else {
$('#currentCourseNo,#currentCourseName,#currentDuration,#currentCourseId').val('');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.