Ссылки в раскрывающемся списке <select>

Возможно ли, чтобы каждый вариант раскрывающегося списка привязывался где-то, когда он был выбран без необходимости внешней кнопки?

<select>
  <option value="x">x</option>
  <option value="y">y</option>
</select>

Ответ 1

Вы можете использовать свойство onChange. Что-то вроде:

<select onChange="window.location.href=this.value">
    <option value="www.google.com">A</option>
    <option value="www.aol.com">B</option>
</select>

Ответ 2

Добавьте обработчик события onchange и установите для местоположения страниц значение

<select id="foo">
    <option value="">Pick a site</option>
    <option value="http://www.google.com">x</option>
    <option value="http://www.yahoo.com">y</option>
</select>

<script>
    document.getElementById("foo").onchange = function() {
        if (this.selectedIndex!==0) {
            window.location.href = this.value;
        }        
    };
</script>

Ответ 3

... или если вам нужно/нужно сохранить свой параметр "значение" как есть, просто добавьте новый атрибут:

<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>

<script>
document.getElementById('my_selection').onchange = function() {
    window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>

Ответ 4

Может быть, это поможет:

<select onchange="location = this.value;">
 <option value="home.html">Home</option>
 <option value="contact.html">Contact</option>
 <option value="about.html">About</option>
</select>

Ответ 5

Это старый вопрос, я знаю, но для 2019 года выглядывает

Как и выше, если вы просто хотите изменить URL, вы можете сделать это:

<select onChange="window.location.href=this.value">
    <option value="www.google.com">A</option>
    <option value="www.aol.com">B</option>
</select>

Но если вы хотите, чтобы он действовал как тег, и вы можете использовать "./page", "#bottom" или "?a=567" "#bottom" "?a=567" используйте window.location.replace()

<select onChange="window.location.redirect(this.value)">
    <option value="..">back</option>
    <option value="./list">list</option>
    <option value="#bottom">bottom</option>
</select>

PS. Извините, если форматирование странное, я новичок в синтаксисе

Ответ 6

Вы можете использовать этот код:

<select id="menu" name="links" size="1" onchange="window.location.href=this.value;">
    <option value="URL">Book</option>
    <option value="URL">Pen</option>
    <option value="URL">Read</option>
    <option value="URL">Apple</option>
</select>