我写了一段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>