JQuery .show not working in IE7

internet-explorer-7jquery

This .show and .hide works great in Firefox 3 but not in IE 7.
When I click < in the list in IE the span hides but does not
show again when I select Between again.

Am I doing something wrong?

    <select id="lst" onchange="onselectchange();">
        <option>Between</option>
        <option>&lt;</option>
    </select>   
    &nbsp;&nbsp;
    <span id="spanAnd">And</span>

   <script type="text/javascript">
       function onselectchange() {
           var lst = document.getElementById('lst');
           var sp = document.getElementById('spanAnd');
           if (lst.value == 'Between') {
               $('#spanAnd').show();
           }
           else {
               $('#spanAnd').hide();
           }
       }
   </script>

EDIT: I tried onclick and onchange.

Best Solution

Use the jQuery bind method on page load... it will help abstract your interaction logic from your presentation logic.

<script type="text/javascript">
    $(function() {
        $('#lst').bind('change',function() {
            var sp = $('#spanAnd');
            if($(this).val() == 'Between') {
               sp.show();
            } else {
               sp.hide();
            }
        });
    });
</script>

That's about as simple as it gets...

NOTE: I just noticed that you are checking for the text of the option and not the value of the select box. Frankly, I think that's silly but if you need to do that for some reason, you can do this:

<script type="text/javascript">
    $(function() {
        $('#lst').bind('change',function() {
            var sp = $('#spanAnd');
            var selected_text = $(this).find('option:selected').html();
            // Possibly faster ways (thanks to bayard and bendewey):
            /*
            var selected_text = $("#lst option[value=" + $('#lst').val() + "]").text();
            // ... or ...
            var selected_text = $("option[value="+$('#lst').val()+"]",this).text();
            // ... or even... 
            var selected_text = $(this).children('option[value="+$('#lst').val()+"]").text();
            */ 
            if(selected_text == 'Between') {
               sp.show();
            } else {
               sp.hide();
            }
        });
    });
</script>

To make my original suggestion work, you would need to change your HTML to:

<select id="lst" onchange="onselectchange();">
    <option value="Between">Between</option>
    <option value="&lt;">&lt;</option>
</select>

... which, as I said, kinda seems like what you'd want to do anyways.