how do i add a dropdown menu on new latest topics to display the number of topics shown

Hello there! and welcome to my "i need help" thread.

So anyways see this:


I want my latest topics to have a dropdown menu too, to allow my members to display the number of recent topics they want to. 10 20 30 50.

Here's what my latest topics looks like:



Here's the script im using for my recent_topics template:

Code:

<!-- Coded by ReMad , Edited by Fusion -->
<style>
div.title {
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #000;
text-align:center;
}

<select>
            <option value="155" selected="selected">10</option>
            <option value="235">15</option>
            <option value="315">20</option>
        </select>
  </style>

<!-- BEGIN classical_row -->
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="2" align="center"><tbody>
<thead><tr>
</th></tr></thead>
<tr>
<td style="padding: 0px; Background: url(http://demo.dzinerstudio.com/smf2/Themes/lagusta_20/images/custom/body_bg.png) repeat scroll 100% 100%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" colspan="2" width="100%">
 
 <tr><td class="catHead" colspan="3" width="70%">
<div class="title"><font color="white">Topic</font></div>
</td>
 <td class="catHead" colspan="1" width="30%">
<div class="title"><font color="white">Last post</font></div>
</td></tr>

<tr valign="top">
<td colspan="1" style="border-top: 0px none; padding: 0px; background: transparent url(http://i46.servimg.com/u/f46/17/26/01/29/list11.gif) no-repeat scroll center top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="24"><img src="http://2img.net/i/fa/empty.gif" width="24" border="0"></td><td style="border-top: 0px none; padding: 0px; line-height: 20px; background-repeat: repeat;" align="left" background="http://www.codeleakers.com/vietvbb/topx/listbg.gif" width="70%">
<!-- BEGIN recent_topic_row -->
  <a href="{classical_row.recent_topic_row.U_TITLE}"><b><font style="font-family: Arial; font-size: 10px">{classical_row.recent_topic_row.L_TITLE}</font></b></a><br>

<!-- END recent_topic_row -->
</td>
<td style="border-top: 0px none; padding: 0px; line-height: 16.5px; background-repeat: repeat;" align="center" background="http://www.codeleakers.com/vietvbb/topx/listbg.gif" width="15%">
<span class="gensmall">
<!-- BEGIN recent_topic_row -->
<br><!-- END recent_topic_row -->
</span>
</td>
<td style="border-top: 0px none; padding: 0px; line-height: 20px; background-repeat: repeat;" align="left" background="http://www.codeleakers.com/vietvbb/topx/listbg.gif" width="15%">
<!-- BEGIN switch_poster -->
<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
<!-- END switch_poster_guest -->
<!-- BEGIN recent_topic_row -->
  <!--<img src="">-->
<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font style="font-family: Times New Roman; font-size: 12px">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
<br><!-- END recent_topic_row -->
 
</td>
</tr></table></td></tr></tbody></table>
<!-- END classical_row -->
 

so could this be done with javascript or Css? cause i really want to do this, but im intermediate and cant code Java yet. Thanks, i would VERY Appreciate it, if i could recieve help on this and get this solved.

Thanks for reading my "i need help" thread