Question

我有一个超过100选项的下拉列表。我想在选择与选项值匹配的相同ID的选项时滚动到div。任何帮助将受到高度赞赏。

<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

Answer 1

$('select').on('change', function(){
    $('body, html').animate({ scrollTop: $('#' + $(this).val()).position().top });
});

工作演示http://jsfiddle.net/gcXM7/1/

但是，如果不明显，您可能想要选择一个ID

<select id="foo">

并仅选择那个

$('#foo').on('change', ...

Answer 2

嘿，检查一下你需要描述你的下拉列表的ID，首先检查这个小提琴代码

HTML

<select id="divselector">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

Jquery的

$(function(){
    $('#divselector').change(function(){
      $('html,body').animate({scrollTop:$('#'+$('#divselector').val()).offset().top}, 'slow'); 
     })
});

Answer 3

<select id='test'>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

<div id="a" style="position:absolute; top:100px;">a div</div>
<div id="b" style="position:absolute; top:200px;">b div</div>
<div id="c" style="position:absolute; top:500px;">c div</div>



 $('select#test').on('change', function() {
  var val = $(this).val();
  $("html, body").animate({ scrollTop: $('#'+val).offset().top }, 0)
});

http://jsfiddle.net/crQu9/1/

更改下拉列表滚动到特定ID

3 个答案: