使用jQuery隐藏/显示select选项更改内容时页面滚动

时间:2012-12-03 23:35:14

标签: jquery

我写了一段jQuery,当选择了下拉选项时,它会隐藏/显示指定的元素。

我遇到的问题是,当选择其中一个选项时,页面会滚动,以便浏览器的底部与刚刚隐藏/显示的内容的顶部对齐。我该如何阻止这种情况发生?

以下是代码的摘要版本。

$(function() {
    $('#billing_address2').change(function() {
        $('.calendar').hide();
        if ($(this).val() == "None") {
            $('.empty').show();
        }
        if ($(this).val() == "Arch Hill" || $(this).val() == "Balmoral" || $(this).val() == "Central Business District" || $(this).val() == "Eden Terrace" || $(this).val() == "Ellerslie" || $(this).val() == "Epsom") {
            $('.central').show();
        }
        if ($(this).val() == "Albany" || $(this).val() == "Bayswater" || $(this).val() == "Bayview" || $(this).val() == "Belmont") {
            $('.north').show();
        }
        if ($(this).val() == "Glendowie" || $(this).val() == "Kohimarama" || $(this).val() == "Meadowbank" || $(this).val() == "Mission Bay") {
            $('.east').show();
        }
        if ($(this).val() == "Avondale" || $(this).val() == "Blockhouse Bay" || $(this).val() == "Glen Eden" || $(this).val() == "Glendene") {
            $('.west').show();
        }
    ;});
});

<select id="billing_address2">
    <option selected value="None">Suburb...</option>
    <option value="Albany">Albany</option>
    <option value="Arch Hill">Arch Hill</option>
    <option value="Avondale">Avondale</option>
    <option value="Balmoral">Balmoral</option>
    <option value="Bayswater">Bayswater</option>
    <option value="Bayview">Bayview</option>
    <option value="Belmont">Belmont</option>
    <option value="Blockhouse Bay">Blockhouse Bay</option>
    <option value="Central Business District">Central Business District</option>
    <option value="Eden Terrace">Eden Terrace</option>
    <option value="Ellerslie">Ellerslie</option>
    <option value="Epsom">Epsom</option>
    <option value="Glen Eden">Glen Eden</option>
    <option value="Glendene">Glendene</option>
    <option value="Glendowie">Glendowie</option>
    <option value="Kohimarama">Kohimarama</option>
    <option value="Meadowbank">Meadowbank</option>
    <option value="Mission Bay">Mission Bay</option>
</select>

0 个答案:

没有答案