При выборе определенного сезона, должны появляться определенные серии...

вопрос

Доброго времени суток. Помогите решить вопрос. Как сделать так, чтобы при выборе определенного сезона в fullstory, появлялись определенные серии. Знаю, что плохо объсянил, поэтому выкладываю ссылку на пример

Показать / Скрыть текст

.

Вот код fullstory:

<div id="FullstoryPlayer" class="FullstoryPlayer">
<div id="OnlinePlayr">
<div id="div_video"></div>

<ul class="tabs">


<select size='1' onchange="javascript:if(document.getElementById('film_main')) document.getElementById('film_main').src=this.value;">
    <option selected='selected' value='[xfvalue_trailer]'>Сезон 1</option>          
    <option value="[xfvalue_trailer2]">Сезон 2</option>
    <option value="[xfvalue_trailer3]">Сезон 3</option>
    </select>
    
    
    <select size='1' onchange="javascript:if(document.getElementById('film_main')) document.getElementById('film_main').src=this.value;">
    <option selected='selected' value='[xfvalue_trailer]'>Серия 1</option>          
    <option value="[xfvalue_trailer2]">Серия 2</option>
    <option value="[xfvalue_trailer3]">Серия 3</option>
    <option value="[xfvalue_trailer4]">Серия 4</option>
    <option value="[xfvalue_trailer5]">Серия 5</option>
    <option value="[xfvalue_trailer6]">Серия 6</option>
    <option value="[xfvalue_trailer7]">Серия 7</option>
    </select>
    
    
</ul>

<div class="section">

<div class="box visible">
<iframe src="[xfvalue_trailer]" name='film_main' id='film_main' width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer2]" name='film_main' id='film_main' width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer3]" name='film_main' id='film_main' width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer4]" name='film_main' id='film_main' width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer5]" width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer6]" width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer7]" width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer8]" width="970" height="410"  frameborder="0"></iframe>
</div>
    <div class="box">
<iframe src="[xfvalue_trailer9]" width="970" height="410"  frameborder="0"></iframe>
</div>
    <div class="box">
<iframe src="[xfvalue_trailer10]" width="970" height="410"  frameborder="0"></iframe>
</div>
    <div class="box">
<iframe src="[xfvalue_trailer11]" width="970" height="410"  frameborder="0"></iframe>
</div>
 <div class="box">
<iframe src="[xfvalue_trailer12]" width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer13]" width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer14]" width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer15]" width="970" height="410"  frameborder="0"></iframe>
</div>
    <div class="box">
<iframe src="[xfvalue_trailer16]" width="970" height="410"  frameborder="0"></iframe>
</div>
    <div class="box">
<iframe src="[xfvalue_trailer17]" width="970" height="410"  frameborder="0"></iframe>
</div>
    <div class="box">
<iframe src="[xfvalue_trailer18]" width="970" height="410"  frameborder="0"></iframe>
</div>
    <div class="box">
<iframe src="[xfvalue_trailer19]" width="970" height="410"  frameborder="0"></iframe>
</div>
    <div class="box">
<iframe src="[xfvalue_trailer20]" width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer21]" width="970" height="410"  frameborder="0"></iframe>
</div>
<div class="box">
<iframe src="[xfvalue_trailer22]" width="970" height="410"  frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>