Sauter à l'ancre via le menu de sélection sans soumettre à l'aide jquery

Question

Nous avons un menu de sélection utilisé pour sauter à divers s sur une page. Écrit (par quelqu'un d'autre) il y a quelques années. Nous avons récemment mis à jour la jquery actuelle et cela ne fonctionne plus. Je pense que c'est une solution simple, mais mes compétences JavaScript sont faibles. Action souhaitée: sauter à l'ancre en fonction de l'ID dans le menu de sélection sans avoir à appuyer sur la touche Soumettre.

code actuel pour le menu de sélection:

<?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>"; 
?> 

Et le javascript:

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

Je crois que @selected ne soutient plus en jquery, mais en supprimant le signe @ ne contribue pas .

grâce

Answer 1

Utilisez le sélecteur :selected pour trouver l'option.

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

Answer 2

j'utiliser l'attribut value ici, comme ceci:

<?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>"; 
?> 

alors votre code devient encore plus simple avec .val(), comme ceci:

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

Answer 3

Utilisez <option value="#destination"> pour stocker les ID d'ancrage de destination, puis créer un crochet pour surveiller les modifications, tout comme Josiah posté. Excepté rechercher l'ancre #fragment à partir de l'attribut de valeur de l'option en utilisant val().

Exemple:

<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

cela devrait fonctionner comme une solution générale pour des raisons impérieuses l'ancre de destination

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