[jQuery] Cycle breaks in IE7 when using list box

[christopherious]

I have an instance of Cycle 2.63 (jquery.cycle.all.min.js) that works
great except for one thing.  By using a list box for selection, it
breaks under IE7 (content doesn't change upon user selection).

I'm still pretty new to JS development.  Haven't tried IE8 out just
yet, but I'd like to get this working in IE7 anyway.

Here's a sample of my code:

--------------------------------------------------------------------
<?php
  jq_add('cycle');
?>

<script type="text/javascript">
$(function() {
    $('#s1').cycle({
        timeout: 0,
        speed:   300,
        startingSlide: 0
    });
    $('#goto1').click(function() {
        $('#s1').cycle(0);
        return false;
    });
    $('#goto2').click(function() {
        $('#s1').cycle(1);
        return false;
    });
    $('#goto3').click(function() {
        $('#s1').cycle(2);
        return false;
    });
});
</script>

<script type="text/javascript">
document.open();
document.write('<strong>Pick a section:<\/strong>&nbsp;<select><option
id="goto1" value="Section 1">Section 1<\/option><option id="goto2"
value="Section 2">Section 2<\/option><option id="goto3" value="Section
3">Section 3<\/option><\/select>');
document.close();
</script>

<noscript><div class="toc">
<div class="toc-title">Pick a Section</div>
<div class="toc-list">
<ul>
 <li><a href="#Section1">Section 1</a></li>
 <li><a href="#Section2">Section 2</a></li>
 <li><a href="#Section3">Section 3</a></li>
</ul>
</div>
</div></noscript>

<ul id="s1">
 <li>Section 1, Lorem ipsum.</li>
 <li>Section 2, Lorem ipsum.</li>
 <li>Section 3, Lorem ipsum.</li>
</ul>

--------------------------------------------------------------------