我如何重新填充jQuery中的下拉列表

Question

I'm trying to make a dropdown list that when one item is selected then the other dropdown will change it's list

So fart this is what i've done,
This dropdown that the list of another dropdown:

<select id="testers_team-${info.problemId}" class="tester_team">
    <optgroup label="Current Value">
         <option><c:out value="${info.team}"></c:out></option>
    </optgroup>
    <optgroup label="Teams">
         <c:forEach var="team" items="${requestScope.testers}">
        <option value="${team.key}">${team.key}</option>
         </c:forEach>
    </optgroup>
</select>

This is the dropdown that if another dropdown is selected:

<select id="testers" class="testers_team-${info.problemId}">
    <optgroup label="Current Assigned Tester">
        <option>I'll think about this later</option>
    </optgroup>
    <optgroup label="Testers">
          <c:forEach var="testers_per_team" items='${test.KwekKwek}'>
               <option>${testers_per_team}</option>
          </c:forEach>
    </optgroup>
</select>

This code is the Ajax that get the proper value and send it back that should be repopulating the dropdown:

$('.tester_team').each(function(){
             $(this).change(function() {
                 var id = $(this).attr('id');

                  $.post('Analysis',
                     {team: $(this).val()},
                     function(data)
                     {
                        $('.'+id).each(function()
                        {
                            $(this).find('option').remove();
                            $.each(data, function(index, value) {              
                                $('<option>').text(value).appendTo($select);
                            });
                        });

                     },"json"); 
             }); 
         });

What is done already is:

1. Send to the servlet the selected value of the first dropdown
2. Process the value so it will return the proper value to repopulate the second dropdown
3. Get the value in JSON form
4. Removed the list from the SECOND dropdown when another value is selected on the FIRST dropdown

The problem is the repopulating itself, is used

$.each(data, function(index, value) {              
    $('<option>').text(value).appendTo($select);
});

to repopulate the list of the SECOND dropdown but it seems that code is wrong. Please help me to resolve this.

: Both dropdown is iterated by foreach thats why is used the id of the first dropdown to identify the second dropdown relative to it. And about the data that send back by the servlet, it is not null, i tried to pop it out in an alert(); and it is there.

Answer 1

Can you try this ?

$('.'+id).each(function()
  {
    $(this).find('option').remove();
    var optgroup = $("optgroup[label=Testers]", this);
    $.each(data, function(index, value) {              
      $('<option>').text(value).appendTo(optgroup);
    });
  })