Как сохранить текущую информацию выпадающего списка без повторного заполнения списка?

Question

В настоящее время у меня есть выпадающий список, который заполняется с именами команд из базы данных SQL:

$(".show_hide2").click(function() { 
    ("#team").find("tr:gt(0)").remove(); 
    $(".slidingDiv2").slideToggle(); 
    teams = $.parseJSON(getTeams()); 
    for (i = 0; i < teams.length; i++) { 
     var team = getTeam(teams[i]); 
     updateTeamBoard(team); 
     populateTeamSelection(team); 
    } 
} 

Вот код для заполнения выпадающего меню.

JS:

function populateTeamSelection(team) { 
    var team = $.parseJSON(team); 
    $("#teamSelection").find("#tr:gt(0)").remove(); 
    $("<option value='" + team.teamID + "'>" + team.teamName + "</option>").appendTo("#teamSelection"); 
} 

HTML:

<div class="slidingDiv2"> 
    <select id="teamSelection"> 
     <option id="default" value="0">Select A Team</option> 
    </select> 
    <input type="button" id="teamViewer" value="Team Viewer"></input> 
</div> 

Проблема заключается в том, каждый раз, когда я нажимаю кнопку показать/скрыть, она сохраняет текущую информацию в списке, а затем добавляет ту же информацию к списку. Я использую AJAX для динамического создания таблиц и списков, но по какой-то причине я просто не могу понять это, и у меня есть ощущение, что это довольно просто. Любая помощь приветствуется.

Answer 1

Каждый раз, когда вы нажимаете, вызывается populateTeamSelection(). Каждый раз, когда вызывается populateTeamSelection(), он добавляет что-то в список. Быстрое исправление заключается в том, чтобы удалить все элементы из списка, прежде чем добавлять какие-либо из них.

Вы можете использовать $('select').children().remove(), чтобы удалить все элементы option перед вашей петлей for.

Answer 2

$(function ($) 
{ 
    $populateTeamSelection = function(team) 
    { 
     $result = $.parseJSON(team,function(call){$handle = call;}); 
     $result.success(function(){ $data = $handle; }); 
     $result.error(function() 
     { 
      //Do something or nothing on error 
     }); 
     $result.complete(function() 
     { 
      //Clear all current options first 
      $('#teamSelection').html(''); 

      //Populate with new data 
      $.each($data,function(lable,value) 
      { 
       $("#teamSelection").append($("<option></option>").attr("value",value['teamID']).text(value['teamName'])); 
      }); 
     }); 
    }; 
}(jQuery)); 

$(document).ready(function() 
{ 
    $('.show_hide2').click(function() 
    { 
     $(".slidingDiv2").slideToggle(); 
     $populateTeamSelection(team); 
    }); 
});