Can anyone give me suggestions on how to get this to work in ie?

Works fine in firefox but does nothing in ie.

<script type="text/javascript">
$(document).ready(function(){
    var links = $('.bound');
    var west = $('.west');
    var west2 = $('.west2');
    var west3 = $('.west3');
    var west4 = $('.west4');
    west2.hide();
    west3.hide();
    west4.hide();
    links.click(function(event){
       west.hide();
       west2.hide();
       west3.hide();
       west4.hide();
       west.filter('.' + event.target.id).show();
       west2.filter('.' + event.target.id).show();
       west3.filter('.' + event.target.id).show();
       west4.filter('.' + event.target.id).show();
    });
});
</script>

html

<div class="tabset">
            <div id="tab1" class="tab-box">
                <div class="form-holder">
                    <form action="#">
                        <fieldset>
                            <label for="lb02"><strong>Choose District:</strong></label>
                            <select id="lb02">
                                <option class="bound" id="west">WEST</option>
                                <option class="bound" id="west2">WEST2</option>
                                <option class="bound" id="west3">WEST3</option>
                                <option class="bound" id="west4">WEST4</option>
                            </select>
                        </fie开发者_如何学编程ldset>
                    </form>
                </div>
                <div class="report-box">
                    <table>
                        <thead>
                            <tr>
                                <td class="name">Name</td>
                                <td class="department">Department</td>
                                <td class="title">Title</td>
                                <td class="district">District</td>
                                <td class="profile">&nbsp;</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="west">
                                <td>Name1</td>
                                <td>Dept2</td>
                                <td>Title2</td>
                                <td>West</td>
                                <td><a class="btn-profile" href="#">PROFILE</a></td>
                            </tr>
                            <tr class="west2">
                                <td>Name2</td>
                                <td>Dept2</td>
                                <td>Title2</td>
                                <td>West2</td>
                                <td><a class="btn-profile" href="#">PROFILE</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

---

Instead of a click event on the option elements, use a change event on the select element.

var links = $('#lb02'),
    wests = $('.west,.west2,.west3,.west4');
wests.not('.west').hide();
links.change(function(event) {
    wests.hide().filter('.' + this.options[this.selectedIndex].id).show();
});

---

It's probably because IE doesn't recognize event.target, it uses a srcElement property instead. Also IE may not pass the event parameter to the handler so you have to grab window.event. For your click function try:

links.click(function(event){
    var e = event || window.event,
        et = (e.target) ? e.target : e.srcElement;

       west.hide();
       west2.hide();
       west3.hide();
       west4.hide();
       west.filter('.' + et.id).show();
       west2.filter('.' + et.id).show();
       west3.filter('.' + et.id).show();
       west4.filter('.' + et.id).show();
});