Question

我们有一个选择菜单用于跳转到页面上的各种s。几年前写的（由其他人写的）。我们最近升级到当前的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

这应该作为覆盖目标锚

的一般解决方案

/app

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

4 个答案: