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

Question

我正在尝试创建一个下拉列表，当选择一项时，另一个下拉列表将更改它的列表

放屁，这就是我所做的
第一个下拉列表将更改另一个下拉列表的列表：

<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>

这是第二个下拉列表，如果选择了另一个下拉列表， 则将更改 ：

<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>

这段代码是获得正确值并将其发送回应该重新填充下拉列表的Ajax ：

$('.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"); 
             }); 
         });

已经完成的工作是：

1. 将第一个下拉列表的选定值发送到servlet
2. 处理该值，以便它将返回正确的值以重新填充第二个下拉列表
3. 以JSON形式获取值
4. 在FIRST下拉菜单中选择了另一个值后，从SECOND下拉列表中删除了该列表

问题是重新填充本身，用于

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

重新填充第二个下拉列表的列表，但似乎代码是错误的。 请帮助我解决此问题。

注意 ：两个下拉列表都通过foreach迭代，这就是为什么使用第一个下拉列表的id来标识相对于它的第二个下拉列表。 关于由servlet返回的数据，它不为null，我试图将其弹出到alert(); 它在那里。

Answer 1

你可以试试这个吗？

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