web-dev-qa-db-ja.com

<select>ドロップダウンオプションのリンク

外部ボタンを使用せずに選択すると、各ドロップダウンオプションがどこかにリンクすることは可能ですか？

<select>
  <option value="x">x</option>
  <option value="y">y</option>
</select>
javascripthtmlselectdrop-down-menu
33
Sebastian

OnChangeプロパティを使用できます。何かのようなもの：

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

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

...または、オプションの「値」をそのまま維持する必要がある場合は、新しい属性を追加します。

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

たぶんこれが役立ちます：

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

これは古い質問ですが、私は知っていますが、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"_を使用できます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。書式がおかしい場合は申し訳ありませんが、Stack Overflowsの構文は初めてです

0
Oliver Simmons