Question

在Firefox中运行良好但在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>
                        </fieldset>
                    </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>

Answer 1

而不是click元素上的option事件，请在change元素上使用select事件。

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();
});

Answer 2

可能是因为IE无法识别event.target，而是使用srcElement属性。 IE也可能无法将事件参数传递给处理程序，因此您必须抓取window.event。对于您的点击功能，请尝试：

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();
});

任何人都可以给我建议如何让这个工作在ie？

2 个答案: