I populate child dropdown (second dropdown) by the onchange event in parent dropdown (first dropdown). After that by onchange event of child dropdown I am autofilling three text boxes. But my issue is with first dropdown. Id of first dropdown is combo and id of second dropdown is combo1.
When I select A from first dropdown then I in second dropdown I have got a value 1 by appending in javascript written below in auto.jsp. But when I select option B in first dropdown then I got 2 in second dropdown but the old value 1 should be removed from second dropdown, but it is still remaining there, why? Similarly when I am selecting A or B from first dropdown multiple times then multiple values 1 or 2 are coming in second dropdown which I want to remove and to display single times that is if A will be selected then 1 will be displayed and if B will be selected then 2 will be displayed, how can it be done?
auto.jsp
<script type="text/javascript">
$(document).ready(function() {
$("#combo").change(function() {// by onchange event in first dropdown I populate second dropdown having id combo1
$.getJSON('combo1.jsp', {firstcombobox : this.value}, function(responseData) {
$("#combo1").append(
$("<option></option>").html(responseData.name).val(responseData.name)
);
});
});
// After getting value in second dropdown, by onchange event i am autofilling 3 textboxes.
$("#combo1").change(function() {
$.getJSON('combo2.jsp', { combo1Val : $(this).val() }, function(data) {
$("#firsttextbox").val(data.name);
$("#secondtextbox").val(data.roll_no);
$("#thirdtextbox").val(data.fine);
});
});
});
</script>
<body>
//First dropdown
<select id="combo" name="firstcombobox">
<option value="">select</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
// Second dropdown
<select id="combo1" name="combo1Val" >
<option value="">select</option>
</select>
</body>
combo1.jsp
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%
String firstcombobox=request.getParameter("firstcombobox");
if(firstcombobox.equalsIgnoreCase("a")){// If selected value in first dropdown is A then 1 will be displayed as written below
JSONObject arrayObj= new JSONObject();
arrayObj.put("name","1");// I displayed 1 in second dropdown option when A is selected
response.setContentType("application/json");
response.getWriter().write(arrayObj.toString());
}
else if(firstcombobox.equalsIgnoreCase("b")){
JSONObject arrayObj= new JSONObject();
arrayObj.put("name","2");
response.setContentType("application/json");
response.getWriter().write(arrayObj.toString());
}
else{
}
%>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
