Hi

This is my first visit to Sitepoint, it looks a really helpful place

I am learning how to javascript and jquery and figured best way to learn is by dealing with real life problems, so heres my first one.

To show you what i've done i've uploaded a test file here

http://www.harshadpatel.co.uk/selectbox/

As you can see i have done a page with two jump menus, as I cant style selects properly, I've attempted to spit them out as li's so i can style them so I have got up to this point, the problem i have is that the top menu it should only say 1, 2, 3 and the bottom one 4, 5, 6 at the moment it spits it out as 1,2,3,4,5,6 on both menus.

This is the html

Code:
<form name="join-us-home" class="join-us-home">    
    <select class="menu">
        <option value="value-1">1</option>
        <option value="value-2">2</option>
        <option value="value-3">3</option>
    </select>
    <input type="submit" value="Go" />
</form>


<form name="join-us-home" class="join-us-home">    
    <select class="menu">
        <option value="value-4">4</option>
        <option value="value-5">5</option>
        <option value="value-6">6</option>
    </select>
    <input type="submit" value="Go" />
</form>
and the JS is this

Code:
<script type="text/javascript">
    $(document).ready(function () {
        var list = $('<ul>');
        $('.menu option').each(function () {
            $('select').hide();
            var test = $(this).attr('value');
            var text = $(this).text();
            $('<li><a href="' + test + '">' + text + '</a></li>').appendTo(list);
        });
        list.insertBefore($('input'));

        $('.join-us-home').submit(function () {
            window.location = $('.menu', $(this)).val();
            return false;
        });
    });
</script>
i think the selector is wrong, but i am a bit stuck here, any pointers would be greatly appreciated

Thanks again,


harshyp