Spring MVC: Populate a dropdown based on another - spring

Question

this enum is define in one of my class
public enum Type {
TEXT(1), BINARY(2);
private final int type;
AttributeType(int type) {
this.type = type;
}
public int getType() {
return type;
}
}
Dropdown menu #1
<label class="col-sm-3 col-md-3 col-lg-3 control-label"
style="font-weight: bold; font-size: 12px; color: #666666">
<span style="color: red;">*</span> Type
</label>
<div class="col-sm-9 col-md-9 col-lg-9">
<form:select class="form-control"
style="width: 80%" path="">
<form:option value="" selected="true" disabled="true"
label="Select a type" />
<c:forEach var="attribute" items="${Type}">
<form:option value="${attribute}" />
</c:forEach>
</form:select>
<form:label class="error" id="errorStatus" path=""
style="color: red;">${errorStatus}</form:label>
</div>
Dropdown menu #2
<label class="col-sm-3 col-md-3 col-lg-3 control-label"
style="font-weight: bold; font-size: 12px; color: #666666">
<span style="color: red;">*</span> Constraint
</label>
<div class="col-sm-9 col-md-9 col-lg-9">
<form:select class="form-control" style="width: 80%" path="">
<form:option value="" selected="true" disabled="true"
label="Select a Constrait" />
<c:forEach var="type" items="${Type}">
<c:if test="{type== TEXT}">
<form:option value="" label="test1" />
</c:if>
<c:if test="{type== BINARY}">
<form:option value="" label="test2" />
</c:if>
</c:forEach>
</form:select>
<form:label class="error" id="errorConstraint" path=""
style="color: red;">${errorStatus}</form:label>
</div>
In my Controller class, I have add the list to my attribute model.addAttribute("TypeValue", Arrays.asList(Type.values()));
What I am trying to do:
Drop down menu #2 to display test1 if user have selected TEXT in Drop down menu #1 and
display test2 if user selected BINARY in Drop down menu #1
Actual result
Nothing is being display after selecting either options in drop down menu #1

Answer 1

using jquery
var diction = {
TEXT: ["B1", "B2", "B3"],
BINARY: ["B4", "B5", "B6"]
}
// bind change event handler
$('#EventId').change(function() {
// get the second dropdown
$('#SecondDropdown').html(
// get array by the selected value
diction[this.value]
// iterate and generate options
.map(function(v) {
// generate options with the array element
return $('<option/>', {
value: v,
text: v
})
})
)
// trigger change event to generate second select tag initially
}).change()
and I remove all the <c:if test> tag. This solution is base on this post.
I am open to ways to improve my code too