<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/taglib/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/taglib/fmt.tld" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<div id="subject-class-type-select3">
	<li>
	<span>科目</span> 
	<select id="subjectId" name="subjectId">
			<c:forEach var="subject" items="${subjectList}">
				<option data-type="${subject.type.value}" data-class-types="${subject.classTypes}"
					value="${subject.id}" <c:if test="${subjectId!=null && subjectId==subject.id}">selected</c:if>>${subject.name}</option>
			</c:forEach>
	</select>
	</li>
	<li>
	<span>文理科</span> 
	<select id="classTypeValue" name="classTypeValue">
			<c:forEach var="classType" items="${classTypeList}">
				<option value="${classType.value}"
					<c:if test="${classTypeValue!=null && classTypeValue==classType.value}">selected</c:if>>${classType.name}</option>
			</c:forEach>
	</select>
	</li>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$('#subject-class-type-select3 select[name="subjectId"]').change(function(){
		var classTypes = $('#subject-class-type-select3 select[name="subjectId"] option:selected').attr('data-class-types');
		if(classTypes==undefined){
			classTypes='';
		}
		var count=0;
		$('#subject-class-type-select3 select[name="classTypeValue"] option').each(function(index, obj){
			if(classTypes.indexOf(obj.value)==-1){
				$(obj).hide();
			}else{
				$(obj).show();
				count++;
				if(count==1){
					$(obj).attr('selected',true);
				}
			}
		});
	});
});
</script>