MY HTML:
<tr>
<td class="title2">Division</td>
<td>
<select id="divisionId" class="frmSelectClass">
<option selected='selected' value=-1>All</option>
<c:forEach var="division" items="${division}">
<option value="${division.id}">${division.name}</option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td class="title2">Service</td>
<td>
<input id="serviceName" onkeypress="showServiceSettings();" onblur="setServiceSettings();" class="input">
<input type="hidden" id="serviceId">
</td>
</tr>
My Javascript:
function showServiceSettings() {
var divisionId = $("#divisionId").val();
console.log(divisionId);
if($("#companyId").val() == -1){
$("#spanCompanyError").text("Company is required.");
} else {
clearErrorMessages();
var serviceId = "serviceId";
console.log(serviceId);
var companyId = $("#companyId").val();
var serviceName = processSearchName($.trim($("#serviceName").val()));
var listUri = contextPath + "/getServices?divisionId="+divisionId+"&name="+serviceName;
var getServiceSetupUri = contextPath + "/getServices?divisionId="+divisionId+"&name="+serviceName;
loadACList("serviceName", serviceId, listUri, getServiceSetupUri, "name", "name",);
}
}
function setServiceSettings () {
var companyId = $("#companyId").val();
if(companyId != -1) {
var serviceName = processSearchName($.trim($("#serviceName").val()));
$.ajax({
url: contextPath + "/getServices?divisionId="+divisionId+"&name="+serviceName,
success : function(getServices) {
$("#serviceId").val(getServices.Id);
$("#serviceName").val(getServices.name);
$("#serviceDivisionId").val(getServices.divisionId);
},
dataType: "json"
});
}
}
If I choose Division through a dropdown, all Services will appear in the Input field. I want to filter it and appear by division only.
Please someone help me with this code. I have been doing it for so long.
Thank you for the help.