0

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

到目前为止，这就是我所做的，
第一个下拉列表将更改另一个下拉列表的列表：

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

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

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

4

1 回答 1

0

你能试试这个吗？

$('.'+id).each(function()
  {
    $(this).find('option').remove();
    var optgroup = $("optgroup[label=Testers]", this);
    $.each(data, function(index, value) {              
      $('<option>').text(value).appendTo(optgroup);
    });
  })
于 2013-09-23T11:47:00.433 回答