通过使用jquery提交的选择菜单跳转到锚点

我们有一个选择菜单，用于跳转到页面上的各种s。几年前写的（由别人写的）。我们最近升级到当前的jQuery，它不再有效。我认为这是一个简单的修复，但我的JavaScript技能很薄弱。通过使用jquery提交的选择菜单跳转到锚点

想要操作：根据选择菜单中的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中不再支持，但删除@符号没有帮助。

感谢

来源

2010-12-13 Voodoo

使用:selected选择查找选项。

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

来源

2010-12-13 19:36:21

谢谢 - 完美的作品。知道这是一个简单的修复。 – Voodoo 2010-12-13 21:23:45

我会用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(); 
    }); 
});

来源

2010-12-13 19:43:09

感谢尼克 - 这是一个更清洁，使用价值更有意义。 – Voodoo 2010-12-13 21:25:58

@Voodoo - 我会亲自走这条路线，因为你也会有更多有效的ID – 2010-12-13 21:26:44

使用<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>

来源

2014-08-12 17:01:29

这应该是一个通用的解决方案为工作压倒一切的目的锚点

<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>

来源

2016-03-01 15:16:20 nerochco

通过使用jquery提交的选择菜单跳转到锚点

回答

相关问题