セレクトボックスを創ってリンク先へジャンプする方法

ＨＰ上でページを創った時に欲しい物の一つがセレクトボックスですよね・・・

今日は、セレクトボックスの基本パターンを紹介しますね・・・

• 先ず、セレクトボックスだけを創ってみます・・・
  
  1. ★セレクトボックス①の見本はこちら★
     
     
  2. HTMLは下の通りです

     ＜SELECT name="text"＞ 　＜OPTION selected value="default"＞★選択して下さい★＜/OPTION＞ 　＜OPTION＞＜/OPTION＞ 　＜OPTION value="#y-473"＞＜Y-473＞3色並びの変形紐＜/OPTION＞ 　＜OPTION value="#y-337"＞＜Y-337＞ツートンの丸紐＜/OPTION＞ 　＜OPTION value="#y-168"＞＜Y-168＞丸と平が交互のMIX紐＜/OPTION＞ 　＜OPTION value="#y-384"＞＜Y-384＞色糸をらせん状に浮かせた丸紐＜/OPTION＞ ＜/SELECT＞

     
     
  3. selectで初期選択指定してます
     要するに、最初開いた時に常に表示されるのはこの部分です。
     
     
  4. <OPTION>セレクトボックスに表示される文字</OPTION>
     
     
  5. value="リンク先"
  
  これはあくまでもセレクトボックスの創り方を説明しただけですので、リンク先へのジャンプは出来ません。
  
  

  ---

  
  
  
  
• ジャンプさせるのにはJavaScriptが必要となります・・・
  
  1. ★セレクトボックス②の見本はこちら★
     
     
  2. JavaScriptは以下の通りです
     

     <SCRIPT language="JavaScript"> ＜!-- function GoPage( a ){ location = a.options[a.selectedIndex].value; } //--＞ </SCRIPT>

     ※　コピーされる場合は＜＞の部分を半角に変更して下さい
  
  
  
  
• 後はセレクトボックスのSelectタグの中に・・・
  
  1. JavaScriptを実行するためにonchange="GoPage(this)"と記述します
     
     
  2. HTMLは以下のように成ります

     ＜SELECT name="text" onchange="GoPage(this)"＞ ＜OPTION selected value="default"＞★このページの掲載商品★＜/OPTION＞ ＜OPTION＞＜/OPTION＞ ＜OPTION value="#y-473"＞＜Y-473＞3色並びの変形紐＜/OPTION＞ ＜OPTION value="#y-337"＞＜Y-337＞ツートンの丸紐＜/OPTION＞ ＜OPTION value="#y-168"＞＜Y-168＞丸と平が交互のMIX紐＜/OPTION＞ ＜OPTION value="#y-384"＞＜Y-384＞色糸をらせん状に浮かせた丸紐＜/OPTION＞ ＜/SELECT＞

     
     
     
  3. リンク先には名前を付けておきます・・・
     例えば、同じページ内の＜Y-473＞3色並びの変形紐の場所にジャンプさせたい時、その商品名の前に以下のように
     ＜A name="y-473"＞＜/A＞＜Y-473＞3色並びの変形紐記述します
     
     
  4. value="#y-473"とシャープを付けて記述します
     ページへのアクセスの場合　http://www.---/index.htmlとなりますが
     ページのある部分へのアクセスの場合　http://www.---/index.html#y-473の様に記述します
     その為に、名前を付ける必要がある訳です。
  
  
  
• このJavaScriptとHTMLを記述すればリンク先へジャンプするセレクトボックスの完成です。

今日の小技は如何でしたか？