Home/ Questions/Q 9023323
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T05:44:02+00:00

I’ve been wrestling with Internet Explorer for a few hours now and can’t seem

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0