CODEWITHSUNDEEP
javascriptjquery
Garrett Leyenaar
Garrett Leyenaar

Reputation: 81

jQuery hide(); and show(); issue in Internet Explorer

I've been wrestling with Internet Explorer for a few hours now and can't seem to figure out my problem. I'm trying to achieve a simple "group option switcher" with jQuery show() and hide().

It's probably best if you look at my demo to see what I mean: http://softwaredb.org/test/jquery-multi-select.html

My code works in every browser except IE. My code is this...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo - Jquery Multi Select box</title>
  <style type="text/css">
  select{width:200px;height:200px;}
  select#boysnames, select#girlsnames{display:none;}
  </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<div id="wrapper" style="padding:50px 0 0 50px;">

<form>      
    <select multiple="multiple" id="theoptions">
        <option value="boysnames">Boys Names</option>
        <option value="girlsnames">Girls Names</option>
    </select>

    <select multiple="multiple" id="placeholder">
    </select>

    <select multiple="multiple" id="boysnames">
        <option>John</option>
        <option>David</option>
        <option>Tom</option>
    </select>

    <select multiple="multiple" id="girlsnames">
        <option>Jenny</option>
        <option>Amanda</option>
        <option>Sara</option>
    </select>
</form>
</div> <!-- end #wrapper -->

<script type="text/javascript">
$('option[value="boysnames"]').click(function() {
    $('select#placeholder, select#girlsnames').hide();
    $('select#boysnames').show();
});
$('option[value="girlsnames"]').click(function() {
    $('select#placeholder, select#boysnames').hide();
    $('select#girlsnames').show();
});
</script>

</body>
</html>

My logic is... on click, hide all other select tags and show the one I'd like to see. It seems to work fine, until I try in IE. Any ideas what I'm doing wrong? I'm very new to jquery (and javascript/programming in general) so forgive me if this is a dumb question.

Upvotes: 1

Views: 510

Answers (2)

Nipun Jain
Nipun Jain

Reputation: 601

    <script type="text/javascript">
    $('#theoptions').click(function() {
    if($(this).attr('value') == "boysnames")
    {
        $('select#placeholder, select#girlsnames').hide();
        $('select#boysnames').show();
    }
    if($(this).attr('value') == "girlsnames")
    {
        $('select#placeholder, select#boysnames').hide();
        $('select#girlsnames').show();
    }

    });

    </script>

use this ..

Upvotes: 1

Bryan
Bryan

Reputation: 6752

Instead of tracking clicks on the option level, track a change on the select level.

$('select#theoptions').change(function() {
    $('#placeholder, #girlsnames').hide();
    if($(this).val() == 'boysnames') {
        $('#boysnames').show();
    } else {    
        $('#girlsnames').show();
    }
});

There are many ways to make your approach a little more intuitive, but this should get you going on the path that you're on

Upvotes: 7

Related Questions