プルダウン

サンプル色つきです。色々。こんな感じです。

<form method="post" name="rep">
 <select name="ss">
  <option style="background-color:背景色;color:文字色;">最初の文字</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色;">リンク１</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色;">リンク２</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色;">リンク３</option>
 </select>
 <input type="button" value="ボタンの文字" style="border:線の太さpx 線の種類 ボタンの枠色;font-size:文字サイズpt;color:ボタンの文字色;background-color:ボタン背景色;"
  onclick="location.href=document.rep.ss.options[document.rep.ss.selectedIndex].value">
</form>

submitボタンなし

サンプル色つきです。色々。こんな感じです。

<form name="pulink">
 <select onchange="location.href=this.options[this.selectedIndex].value">
  <option style="background-color:最初の背景色;color:文字色;">最初の文字</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色;">リンク１</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色;">リンク２</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色;">リンク３</option>
 </select>
</form>

フレームに飛ぶ

サンプル色つきです。色々。こんな感じです。

<form method="post" name="rep">
 <select name="ss">
  <option style="background-color:背景色;color:文字色;">最初の文字</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色;">リンク１</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色;">リンク２</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色;">リンク３</option>
 </select>
 <input type="button" value="ボタン文字" style="border:線の太さpx 線の種類 ボタンの枠色;color:ボタンの文字色;background-color:ボタン背景色;"
  onclick="parent.表示させたいフレ－ム名.location.href=document.rep.ss.options[document.rep.ss.selectedIndex].value">
</form>

フレームに飛ぶ

サンプル色つきです。色々。こんな感じです。

<form name="pulink">
 <select onchange='parent.表示させたいフレーム名.location.href=this.options[this.selectedIndex].value'>
  <option style="background-color:最初の背景色;color:文字色;">最初の文字</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色">リンク１</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色">リンク２</option>
  <option value="リンク先のURL" style="background-color:背景色;color:文字色">リンク３</option>
 </select>
</form>

 

関連記事