Clean old options from child dropdown when receiving data by JSON

Question

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{
}
%>

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

In auto.jsp '#combo' change anonymous function, replace:

$.getJSON('combo1.jsp', {firstcombobox : this.value}, function(responseData) {
    $("#combo1").append(
        $("<option></option>").html(responseData.name).val(responseData.name)
    );
});

with:

$.getJSON('combo1.jsp', {firstcombobox : this.value}, function(responseData) {
    $("#combo1").empty().append(
        $("<option></option>").html(responseData.name).val(responseData.name)
    );
});

To split the string into an array look here: How do I split a string, breaking at a particular character?

They use as follows:

$.getJSON('combo1.jsp', {firstcombobox : this.value}, function(responseData) {
    var splitValues = responseData.name.split(/,/);

    $("#combo1").empty().append("<option value="0">Please select...</option>");

    for (var idx in splitValues) {
        $("#combo1").append(
            $("<option></option>").html(splitValues[idx]).val(splitValues[idx])
        );
    }
});

Hope this helps?

edited May 23 '17 at 12:11

Community

1
1

answered Feb 11 '12 at 07:29

twilson

2,062
14
19

thanks twilson, but in case i want to return more than one value from combo1.jsp that is 1, 2, 3, 4...etc, then how should i edit javascript in auto.jsp so that after selecting A, i can see 1,2,3,4 and similarly when i will select B then 5,6,7,8 will come in drop down of second combo box? and also how should i edit json array so that it can store multiple values in combo1.jsp? – harry Feb 11 '12 at 08:00
i am trying to solve my above problem, but cannot solve please help me – harry Feb 11 '12 at 08:09
i am trying to do it in fiddle but not happening, please see my first comment, i have mentioned, i am displaying 1,2,3,4 but all are coming in one line instead in a drop down way. i am new to this field, please help me twilson – harry Feb 11 '12 at 08:26
Ah, I see what you're getting at now! Added link to answer – twilson Feb 11 '12 at 08:33
@twilson..your answer is not working please test your code in your terminal, i will accept your answer only after it works. After onchange event in first combo box i am not able to populate second combo box but previously it was coming. – harry Feb 11 '12 at 10:00
Sorry @harry, I meant `empty()`, not `clear()`. The example has been corrected. – twilson Feb 11 '12 at 10:16
@twilson..no it is not working, both empty() and clear() are not working, any other suggestion please – harry Feb 11 '12 at 13:09
second combo box is not at all populating when i used empty() or clear() method. i think by these methods second combo box is getting emptied and hence not populating, any idea twilson? – harry Feb 11 '12 at 13:12
Post more of your code, because this works for me perfectly fine in the console, based on my understanding from what you've posted. – twilson Feb 11 '12 at 13:14
the `for...in` loop I included is needed to populate the combo again. – twilson Feb 11 '12 at 13:15
ok then please edit your answer and post that code which is working, is it same like my combo box question or something else? – harry Feb 11 '12 at 13:18
oh...sorry twilson i had not included that for loop, let me go to home now and i am telling you soon ,but without for loop will not it work? i am fetching single value from combo1.jsp – harry Feb 11 '12 at 13:20
Sorry, I've updated it again. If you want to work on example and also see it in action, then go here: http://jsfiddle.net/twilson/RykuJ/ – twilson Feb 11 '12 at 13:29
thanks a lot it worked, but i have to keep one option such as "please select" in second combo box before displaying appropriate data, so that i can do any onchange event in second combo to populate third combo box, how can i do it? Another stuff is can you please bit explain your code with comments so that i can understand better, this one: var splitValues = responseData.name.split(/,/); and that idx – harry Feb 11 '12 at 16:30
Added the "please select" item to the example. – twilson Feb 11 '12 at 17:25
thanks twilson well i am facing a new problem i think i should ask it as i could not find any solution since last night – harry Feb 12 '12 at 06:20
please [see my question](http://stackoverflow.com/questions/9248383/retrieve-more-than-one-value-by-json-array-objects) twilson, if possible please suggest an idea – harry Feb 13 '12 at 03:59
@twilson..please see [this question](http://stackoverflow.com/questions/9277695/insert-data-into-textbox-when-checkbox-is-checked/9277746#9277746) If possible please give an idea – harry Feb 14 '12 at 13:43

Clean old options from child dropdown when receiving data by JSON

1 Answers1

Linked