Как создать раскрывающийся список, в котором каждое значение действует как ссылка на другую страницу?

Question

Я пытаюсь создать ярлык навигации на веб-странице, используя раскрывающийся список.

У меня есть базовый список:

<form>
 <label for="xx">Select a Location</label>
 <select name="xx" id="xx">
 <option selected>Please select one</option>
 <option value="http://www.google.com/">Google</option>
 <option value="http://www.search.com/">Search.com</option>
 <option value="http://www.dogpile.com/">Dogpile</option>
 </select>
 <input type="submit" value="Go" />
</form>

Однако, когда он реализован, он просто брызгает и никуда не денется. В идеале я хотел бы иметь возможность пропустить кнопку «Перейти» и просто перейти на нужную страницу после выбора ссылки из списка.

Буду признателен за некоторые указания относительно следующих шагов.

Спасибо.

Answer 1

Вы можете попробовать это:

$("#xx").change( function () {
  // simulates similar behavior as an HTTP redirect
  window.location.replace($(this).val());
});

Затем вы используете .change() API jquery и находите значение выбора для перенаправления на другую страницу.

Answer 2

$("#xx").change(function() {
    window.location.assign($(this).val());
});

Скрипка здесь