HTML プルダウンメニューからサイトを選択し新しいウィンドウで開く

HTMLでプルダウンメニューからサイトを選択し新しいウィンドウで開く。

この動作は10年以上前から悩んでいたが、実現できていなかった。
昔はGoogleなんて無かったし、簡単に解決策は見当たらなかった。
本屋で解説本を立ち読みしても、機能の一般的な使用法が解説されているだけで、彫り込んだ実用例は少なかった。
今はネット上に同じような悩みが大量に質問され、解決された回答がある。それをまとめると、これで解決できる。

<form name="form1">
<select name="select1" onChange="window.open(this[this.selectedIndex].value,'_blank');">
<option value="#" selected>↓選んでください。Choose↓</option>
<option value="http://その１">その１</option>
<option value="http://その２">その２</option>
<option value="http://その３">その３</option>
</select>
</form>

実際に書いてみて試してみる。
サイトが表示されたので、早速メニューバーで選んでみる。・・・・・静寂な時間が流れる。
何も反応しない。
何度繰り返しても、反応は変わらない。その他の回答例を試してもダメ。
更に記事を探していると、safariだとPopUpBlockする際に警告が出ないと書いてある。また、PopUpBlockされたページは開くことはできないとも書いてあった、
selectタグにあるOnChangeからwindow.openさせるのがダメで、OnClickならsafariでも開くとも書いてあったため、下記を試した。

<form name="form1">
<select name="select1" onClick="window.open(this[this.selectedIndex].value,'_blank');">
<option value="#" selected>↓選んでください。Choose↓</option>
<option value="http://その１">その１</option>
<option value="http://その２">その２</option>
<option value="http://その３">その３</option>
</select>
</form>

おぉ。確かに動いた。これが原因だったのか。
でも、safariの場合だけプログラムを変えることはできない。分岐すればできるけど、面倒。
結局、こんな風にした。

<form name="form1">
<select name="select1">
<option value="#" selected>↓選んでください。Choose↓</option>
<option value="http://その１">その１</option>
<option value="http://その２">その２</option>
<option value="http://その３">その３</option>
</select>
<input type=button value="Go!" onClick="window.open(this.form.select1.options[this.form.
select1.selectedIndex].value,'_blank')"> 
</form>

つまり、プルダウンメニューからジャンプ先を選択し、Go!というボタンを押したら、別のウィンドウが現れ、リンク先が表示される。

少し残念だけど、解決したから、スッキリかな。

タグ：HTML プルダウンメニュー Google