Заполнение многих флажков в древовидной структуре внутри раскрывающегося списка

Ребята Вот флажки, где они отображаются в древовидной структуре. Мне нужно, чтобы он отображался внутри выпадающего списка.

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.team').on('click',function(){ if($(this).is(':checked')){ $(this).next().next().show(); }else{ $(this).next().next().hide(); } }); }); </script> </head> <body> <form name="FootballClubs"> <input type="checkbox" class="team" value="RealMadrid"/>Real Madrid<br /> <div style="padding:10px 10px 10px 15px;display:none;"> <input type="checkbox" class="player" value="CR"/>Cristiano Ronaldo<br /> <input type="checkbox" class="player" value="SA"/>Shabi Alanso<br /> <input type="checkbox" class="player" value="IC"/>Iker Casillias<br /> </div> <input type="checkbox" class="team" value="ManCity"/>Man City<br /> <div style="padding:10px 10px 10px 15px;display:none;"> <input type="checkbox" class="player" value="SA"/>Sergio Aguero<br /> <input type="checkbox" class="player" value="SM"/>Super Mario<br /> </div> </form> </body> </html> 

Я пытаюсь заполнить раскрывающийся список. Помоги мне.

Заранее спасибо.!!