JQuery .show not working in IE7

Question

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.

Answer 1

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.

Answer 2

Try this (putting together some things I left in comments to two other answers):

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

Answer 3

Try using jQuery to find and read the elements also. Something like this:

 function onselectchange() {
       var lst = $('#lst');
       var sp = $('#spanAnd');
       if ($(lst).val() == 'Between') {
           $(sp).show();
       }
       else {
           $(sp).hide();
       }
   }

Answer 4

There is alot of problems you have there.

not wrapping in $(document).ready(); The element may not be loaded when the script is executed.

Using a variable name that starts with a number. (bad style and not sure that is even allowed)

Using the variable name that corresponds to an element's ID.

(Old versions of IE allowed you to use ID.whatever without calling document.getElementById())

Mixing jQuery / Standard DOM.

Calling val() gives you the option value attribute, not the text of the option

   <select id="first">
        <option value="between">Between</option>
        <option>&lt;</option>
    </select>   

    <span id="spanAnd">And</span>

   <script type="text/javascript">
      $(document).ready(function(){

         $("#first").change(function(){   

            if ($("#first").val() == 'between') {
                $("#spanAnd").show();
            }   
            else {
               $("#spanAnd").hide();
            }   

        });
       });
   </script>

Answer 5

Update: Forgive me if this answer is way off; I'm not a jQuery user. These are my thoughts though:

lst.value is not a valid way to access the elements in a select element in IE; at least, I've never seen it done that way (or is that a jQuery trick?)

Do this instead:

if (lst.options[lst.selectedIndex].text == 'Between') { ...

Also notice that I used the "text" property, as this is the value between the <option> tags. The value property is the attribute that's supposed to exist on the <option> element, such as: <option value="0">Between</option>

Answer 6

First of all, to get the selected option text with jQuery is

$("#lst option:selected").text();

Refer to this http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_get_the_text_value_of_a_selected_option.3F if you need more clarification.

Second of all, to get it without a library,

var lst = document.getElementById('lst');
var ind = lst.selectedIndex;

var text = lst.options[ind].text;

Answer 7

This works in IE and Firefox

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

    <span id="spanAnd">And</span>

   <script type="text/javascript">
       function onselectchange() {
           if ($('#lst :selected').text() == "Between") {
               $('#spanAnd').show();
           }
           else {
               $('#spanAnd').hide();
           }
       }
   </script>