I have been searching for a solution to my simple problem. I want to populate a child combo box in index.jsp after an onchange event in the parent combo box. I have tried using JSON array objects to retrieve the data, but the child combo box is not populating. Can someone please help me?
When I select ABC, I want 001 to automatically populate in the second combo box. Similarly, when I select PQR, I want 002 to be populated and 001 to be removed.
index.jsp
<script type="text/javascript">
$(document).ready(function() {
$("#combobox1").change(function() {// by onchange event in parent combo box i want to populate
child combobox
$.getJSON('state.jsp', {count : this.value}, function(responseData) {
$("#combobox2").append(
$("<option></option>").html(responseData.name).val(responseData.name)
);
});
});
});
</script>
<body>
//parent combo box
<select id="combobox1" name="count">
<option value="abc">ABC</option>
<option value="pqr">PQR</option>
</select>
// child combo box
<select id="combobox2" name="combobox2">// here i want to populate data `001` by `ABC` or `002` by selecting `PQR` , how can i do it?
<option value="">select</option>
</body>
state.jsp
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%
String count=request.getParameter("count");
if(count.equals("ABC"){
JSONObject arrayObj= new JSONObject();
arrayObj.put("name","001");// how to populate `001` in an option in child combo box when `ABC` will be selected in parent combo?
response.setContentType("application/json");
response.getWriter().write(arrayObj.toString());
}
else if (count.equals("PQR"){
JSONObject arrayObj= new JSONObject();
arrayObj.put("name","002");// how to populate `002` in an option in child combo box when `PQR` will be selected in parent combo?
response.setContentType("application/json");
response.getWriter().write(arrayObj.toString());
}
%>