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

我们有一个选择菜单，用于跳转到页面上的各种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>";
?>

我相信@selected在jquery中不再支持，但是删除@sign并没有帮助

谢谢

使用：所选选择器查找选项

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

使用：所选选择器查找该选项

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

我在这里使用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>";
?>

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

我在这里使用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>";
?>

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

用于存储目标锚点id，然后创建一个钩子来监视更改，就像Josiah发布的一样。除了使用val从选项的value属性中查找锚点片段之外

例如：

用于存储目标锚点id，然后创建一个钩子来监视更改，就像Josiah发布的一样。除了使用val从选项的value属性中查找锚点片段之外

例如：

---

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

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

---

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

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

---

谢谢尼克-这有点干净，使用值更有意义。@Voodoo-我会亲自走这条路线，因为你也会有更有效的ID谢谢尼克-这有点干净，使用值更有意义。@Voodoo-我会亲自走这条路线，因为你也会有更有效的ID