通过选择菜单跳转到锚点，不使用jQuery提交

Question

我们有一个选择菜单，用于跳到页面上的各个。 几年前（由其他人撰写）。 我们最近升级到了当前的jquery，它不再起作用。 我认为这是一个简单的解决方法，但是我的JavaScript技能很弱。

需要采取的措施：无需选择提交即可跳转至基于选择菜单中ID的锚点。

选择菜单的当前代码：

<?php 
echo "<select id='subscale' style='float:right'>";
echo "<option id=''>Jump to a Teaching Tip</option>";
foreach($scales as $scale) {
    echo "<optgroup label='".$scale["Scale"]["name"]."'/>";
    foreach($scale["Subscale"] as $subscale) {
    echo "<option id='".$subscale["id"]."'>".$subscale["name"]."</option>";
    }
}
echo "</select>";
?>

和javascript：

$(function() {
    // select#subscale: on select, send user to selected subscale
    $("select#subscale").change(function() {
        location.hash = "item-" + $(this).find("[@selected]")[0].id;
    });
});

我相信@selected在jquery中不再支持，但是删除@符号无济于事。

谢谢

Answer 1

使用:selected选择器查找选项。

$(function() {
    $("#subscale").change(function() {
        location.hash = "item-" + $(this).find("option:selected")[0].id;
    });
});

Answer 2

我将在这里使用value属性，如下所示：

<?php 
echo "<select id='subscale' style='float:right'>";
echo "<option value=''>Jump to a Teaching Tip</option>";
foreach($scales as $scale) {
  echo "<optgroup label='".$scale["Scale"]["name"]."'/>";
  foreach($scale["Subscale"] as $subscale) {
    echo "<option value='".$subscale["id"]."'>".$subscale["name"]."</option>";
  }
}
echo "</select>";
?>

那么您的代码使用.val()变得更加简单，如下所示：

$(function() {
    $("#subscale").change(function() {
        location.hash = "item-" + $(this).val();
    });
});

Answer 3

使用<option value="#destination">存储目标锚ID，然后创建一个挂钩来监视更改，就像Josiah发布的一样。 除了使用val()从选项的value属性中查找锚点#fragment。

例：

<select id="chooser">
    <option value="#apple">I really like apples</option>
    <option value="#orange">Give me an orange any day</option>
    <option value="#grape">Grapes are the best</option>
</select>

<div id="apple">
    Let me talk to you about Apples.
</div>
<div id="orange">
    Let me talk to you about Oranges.
</div>
<div id="grape">
    Let me talk to you about Grapes.
</div>

   :
   :
   :

<script type="text/javascript">
$(function() {
    $('#chooser').change(function() {
        window.location.hash = $(this).find("option:selected").val();
    });
});
</script>

Answer 4

这应该作为覆盖目标锚点的一般解决方案

<select id="chooser">
<option value="#apple">I really like apples</option>
<option value="#orange">Give me an orange any day</option>
<option value="#grape">Grapes are the best</option>
</select>

<div id="apple">
   Let me talk to you about Apples.
</div>
<div id="orange">
   Let me talk to you about Oranges.
</div>
<div id="grape">
   Let me talk to you about Grapes.
</div>

<script type="text/javascript">
    $(function () {
         $(document).on("click", "a[href^='#']", function () {
             event.preventDefault();
             $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 500);
         });
     });
</script>