Перейти к привязке через меню выбора без отправки с помощью jquery

Question

У нас есть меню выбора, используемое для перехода к различным элементам на странице. Написано (кем-то еще) несколько лет назад. Недавно мы обновились до текущего jquery, и он больше не работает. Я думаю, что это простое исправление, но мои навыки работы с JavaScript слабые.

Требуемое действие: перейти к привязке на основе идентификатора в меню выбора без необходимости нажимать кнопку отправки.

текущий код для меню выбора:

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

это должно работать как общее решение для переопределения якоря назначения

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

Answer 4

Используйте <option value="#destination">, чтобы сохранить идентификатор привязки назначения, а затем создайте ловушку, чтобы следить за изменениями, как это написал Иосия. За исключением поиска якоря #fragment из атрибута значения опции, используя val().

Пример:

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