ドロップダウンでリンクを変更
ドロップダウンを選択するとリンク先が変わるようにしたい!という要望を聞いたので、ちょろんと作ってみた!
日記じゃなくてスクリプトを簡単に公開できるサイトがあった気がするけど忘れた。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>On Change Test</title> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function setLink(src, id) { var lnk = $(id); var opt = src.options[src.selectedIndex]; lnk.href = opt.value; lnk.innerHTML = opt.innerHTML; } </script> </head> <body> <p>ドロップダウンでリンクを変更</p> <p> <a href="http://www.google.co.jp/" id="lnk">Google</a> <select onchange="setLink(this, 'lnk')"> <option value="http://www.google.co.jp/">Google</option> <option value="http://www.yahoo.co.jp/">Yahoo!</option> </select> </p> </body> </html>