我的表单上有一个下拉字段。当我从下拉列表中选择一个值时，它会立即将焦点重置到表单的顶部。
为了更清楚，我在屏幕顶部有一个图像和几个输入字段。用户必须向下滚动到实际的下拉字段才能选择它。一旦他们选择了值，页面就会滚动回到顶部。
一旦用户从下拉列表中选择一个值，我怎样才能在表单上保持相同的位置？
我的下拉菜单设置为：
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default form-control dropdown-toggle" type="button" id="ddState" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="ulState" aria-labelledby="ddState">
<li><a href="#" data-value="action">Action</a></li>
<li><a href="#" data-value="another action">Another action</a></li>
<li><a href="#" data-value="something else here">Something else here</a></li>
<li><a href="#" data-value="separated link">Separated link</a></li>
</ul>
</div>
</div>
我的javascript设置为：
$("#ulState li").on("click", function () {
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
$("#ulState").focus();
});