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"); 
             }); 
         });

已经做的是：

将第一个下拉列表的选定值发送给servlet
处理该值以使其返回正确的值以重新填充第二个下拉列表
以JSON表格
在FIRST下拉列表中选择了另一个值时，从SECOND下拉列表中删除了列表

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

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

重新填充SECOND下拉列表，但似乎代码错误。请帮我解决这个问题。

注意：这两个下拉列表都由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);
    });
  })

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

1 个答案: