This code describes to select subjects in the course
HTML code is
<form action="mode" onSubmit="calcRoute();return false;" id="keywordForm">
<table border="0">
<thead>
<tr>
<td>COURSE</td>
<td> </td>
<td>SUBJECTS</td>
<td> </td>
<td>TOPIC</td>
</tr>
</thead>
<tr>
<td>
<select id="courseName" name="courseName" multiple size="10">
<c:forEach items="${courses}" var="course">
<option value="${course.courseId}">${course.courseName}</option>
</c:forEach>
</select>
</td>
<td> </td>
<td>
<select id="subjectName" name="subjectName" multiple size="10">
</select>
</td>
<td> </td>
<td>
<select id="topicName" name="topicName" multiple size="10">
</select>
</td> <!-- /controls -->
<td>
<button id="submit"><i class="icon-chevron-right"></i></button>
</td>
</tr>
<div id="alert"></div>
<!-- /controls -->
</table>
</form>
Ajax code is
$('#courseName').change(function () {
var courseId = $(this).val().toString().replace("[", "");
// var courseName = $(this).val().toString().replace("[", "");
$.ajax({
type: "POST",
url: "/sil-web/student/select-subjects?courseId=" + courseId,
//url: "/sil-web/student/select-subjects?courseName=" + courseName,
contentType: 'application/json',
success: function (response) {
$("#subjectName").children().remove();
$.each(response, function (index, item) {
console.log("subject" + item.subjectId);
$("#subjectName").append("<option value=" + item.subjectId + ">" + item.subjectName + "</option>");
});
}
});
});
In this tag subject name not fully taken
$("#subjectName").append("<option value=" + item.subjectId + ">" + item.subjectName + "</option>"
It took like
<option value="advanced" algorithms="">advanced algorithms</option>
because of that I get course name as advanced algorithms as advanced only since it is not display subjects under that course how to solve this?
