jQuery: 从下拉（选择）框跳转到锚标签？

Question

我进行了搜索，但未能获得任何有效的解决方案。（我不是 100% 清楚为什么？）

我正在动态构建下拉 (select) 框...

将匹配的锚标记名称（数字）添加到 select 框中每个选项的值。

我有一些 jQuery 可以观察 select 框和 'jump' 到行进锚 tag/name...

的任何变化

但它不起作用。

根据我尝试的方法，我得到了这些错误：

TypeError: $(...).offset(...) is undefined      

$("html, body").animate({scrollTop: $('#' + $(this).val()).offset().top}, "slow"...

或：

Error: Syntax error, unrecognized expression: ##15

当我在 jQuery 语句中有 # 而没有：

问题1：我应该把#放在选项输入值中吗？还是将其附加在 jQuery 语句中？

jQuery:

$('#topic_entries').change(function(){                                  
            //populate fields with video details            
            if($('#topic_entries option:selected').text() == 'No Videos Found'){
                //do nothing (dead)     
            }else{
                var targetAnchor = $(this).val();
                console.log(targetAnchor);              
                //$('html,body').animate({scrollTop: targetAnchor}, 'slow');
                //$('html, body').animate({'scrollTop': $(targetAnchor).top}, 2000);        
                //$('html, body').animate({scrollTop: $(targetAnchor).offset().top}, 1000);
                $('html, body').animate({scrollTop: $('#' + $(this).val()).offset().top}, "slow");

            }
        });

我在这里错过了什么？我只想从下拉菜单 selection (value)

中执行一个简单的 'jump to anchor' 功能

缺少 HTML 部分：

for($i=0; $i<count($results); $i++){
    //update currentTopic
    $currentTopic = $results[$i]['topic'];
    echo '<option value="'.$i.'">' . $currentTopic . '</option>';
    //echo '<option value="#'.$i.'">' . $currentTopic . '</option>';
}

============================================= =

解决方案更新：

好吧，似乎一个快速简单的解决方法是改用这一行：

window.location.hash = targetAnchor;

但我很好奇为什么 none 的 jQuery 尝试对我有效？（即：我做错了什么？）

Answer 1

您需要使用像

这样的 id 属性来渲染锚点

<a id="foo"></a>

还要确保 $(this).val() 在您的 jQuery 选择中 $('#' + $(this).val()) returns id 属性的值只是为了让 jQuery 选择器正确，例如#foo如上锚所示。

jQuery: 从下拉（选择）框跳转到锚标签？

jQuery: Jump to anchor tag from dropdown (selection) box?

anchor

jquery

select

dropdown