防止OnChange Dropdown跳转效果或避免滚动到页面顶部

时间:2014-07-14 23:17:13

标签: jquery drop-down-menu scrollbar

我有2个下拉列表,用3 * 3矩阵加载一些div。,改变一个或另一个显示动态内容,(非ajax,只是简单的显示和隐藏其他div)#/ p>

由于页面很长,浏览器会生成滚动条。

我面临的问题是,一旦向下滚动到页面底部,并更改下拉列表,页面将滚动到顶部,或具有跳跃效果。我希望一旦改变就保持对下拉的关注,这样我就可以避免跳跃效应。

我尝试了event.preventDefault和event.stopPropagation(),但我仍然看到了这个问题。

想知道是否有人对如何解决这个问题有任何见解。

所有浏览器都会发生这种情况。

<script language="javascript">
                                var jQ132 = $.noConflict(true);
                                jQ132(document).ready(function () {

                                jQ132("#TechnologyDiv").hide();
                                jQ132("#MarketSelect").appendTo("#MarketDiv");
                                jQ132("#TechnologyDiv").show();


                                    var divsinsidecontainer = jQ132("#storiescontainer > div");

                                       jQ132("#TechnologySelect").change(function (e) {                                            
                                        var techSel = jQ132(this).val();

                                        if (techSel == "all") {                                                
                                            divsinsidecontainer.show();
                                        }
                                        else {

                                            divsinsidecontainer.hide();
                                            divsinsidecontainer.each(function () {
                                                if (jQ132(this).attr('data-class').indexOf(techSel) > -1)
                                                    jQ132(this).show();
                                            });                                               
                                        }

                                        jQ132("#MarketSelect").val(0);


                                    });

                                    jQ132("#MarketSelect").change(function (e) {                                            
                                        var marketSel = jQ132(this).val();

                                        if (marketSel == "all") {
                                            divsinsidecontainer.show();
                                        }
                                        else {
                                            divsinsidecontainer.hide();
                                            divsinsidecontainer.each(function () {
                                                if (jQ132(this).attr('data-class').indexOf(marketSel) > -1)
                                                    jQ132(this).show();

                                            });                                                
                                        }
                                        jQ132("#TechnologySelect").val(0);


                                    });

                                });

                                   </script>

0 个答案:

没有答案