Перенаправлять автоматически при выборе элемента из выпадающего списка

Question

Эта страница работает так, как я хочу: http://www.web -source.net / javascript_redirect_box.htm

Но я хочу найти лучший способ, используя jQuery, кто-нибудь может подсказать мне хороший сценарий, который использует jQuery для достижения этой цели?

Answer 1

Для этого вам не нужен предварительно упакованный скрипт, просто пара строк кода.

// get your select element and listen for a change event on it
$('#selectEl').change(function() {
  // set the window's location property to the value of the option the user has selected
  window.location = $(this).val();
});

Answer 2

Другие дали хорошие ответы о том, как это сделать, но ...

Просто предупреждение, IE обрабатывает список выбора onChange совсем иначе, чем другие браузеры, когда кто-то перемещается с помощью клавиатуры. Он подсчитывает каждое нажатие клавиши вверх / вниз как событие onChange, что означает, что вы не можете перемещаться по списку выбора перенаправления с помощью клавиатуры, что лишает доступа пользователей, которые не могут использовать мышь. (Другие браузеры ждут события "enter" или вкладки из списка выбора, прежде чем запускать onChange.) Я потратил много времени, пытаясь найти обходной путь для этого, и никогда полностью не решил проблему.

Я не знаю, объясняет ли это JQuery; надеюсь, что это так, ради доступности вашего сайта.

Может быть, стоит выбрать список выбора, куда идти, и рядом с ним есть кнопка, которая фактически активирует перенаправление. (Если вы не заботитесь о доступности пользователей IE.)

Answer 3

Я не проверял это, но я думаю, что это эквивалентно образцу на странице, на которую вы ссылались.

$(document).ready( function() {
   $('#select').change( function() {
      location.href = $(this).val();
   });
});

<select id="select">
    <option value="#">Select a location</option>
    <option value="location.htm">Location</option>
    <option value="other.htm">Other</option>
</select>

Answer 4

с использованием jQuery:

$('#selectEl').bind("change keyup",function()
{
  // set the window's location property to the 
  // value of the option the user has selected
  window.location = $(this).val();
});

работает для обычного изменения параметров и клавиш со стрелками.

Вы можете иметь возможность использовать это расширение: http://plugins.jquery.com/project/mousewheel Еще не пробовал. :)

Есть также опции мыши, которые вы можете добавить в bind (). Перейдите по адресу: api.jquery.com/category/events/mouse-events/ Любая функция, для которой на этой странице есть имя (), вы можете используйте его имя в bind () выше. Так же, как я сделал с change () => 'change' и mouseup () => 'mouseup' - легко peasy:)

• Мир!

Answer 5

Простой ответ, как предлагает Даниэль, таков: вы не должны этого делать, это плохо для удобства использования и доступности.

Поведение выбора списка зависит от комбинации ОС пользователя, браузера и пользовательских настроек (для обоих). Добавьте к этому тот факт, что событие onchange не реализовано стандартным образом в разных браузерах.

Пользователи должны иметь ожидаемое поведение из списка выбора независимо от того, используют ли они мышь, клавиатуру или колесико мыши или (голос, программа чтения с экрана, что угодно ...). Если вы связываете событие с onchange, оно не должно быть тем, которое отвлекает пользователя от списка выбора, например. перенаправление страницы.

(Лично я много перемещаюсь по сайту с помощью клавиатуры, и если это происходит, я кричу)