select で選んだら画面遷移する

セレクトボックスで項目を選んだらわざわざ「切替」ボタンをユーザに押させなくても表示切替や画面遷移をさせたい時は onchange イベントを使います。

① 指定した URL に飛ばす

<select onchange="location.href=value;">
  <option value="https://hogehoge.com/">ほげほげ社</option>
  <option value="https://foo-bar.jp/">風婆飯店</option>
</select>

value に格納された URL にリダイレクトされるので select 自体 form タグの中に入ってなくても動きます。
もうそれはハイパーリンクでいいのでは、っていうのは野暮。

② submit させる

もうこれだけで送信ボタン押したことになる。

<form method="post" action="">
  <select name="category" onchange="submit(this.form)">
    <option value="salad">サラダ</option>
    <option value="meat">肉</option>
    <option value="pasta">パスタ</option>
    <option value="dessert">デザート</option>
  </select>
</form>

③ name 属性をつけて submit させる

下のフォームのように submit ボタンに name 属性が付いちゃってる場合。
多くは遷移先のページで $_POST から取るときに isset($_POST['name']) や !empty($_POST['name']) で判定取ったりするでしょうから submit の name 属性も持っていきたいときの考え方。

<form method="post" action="">
  <select name="area">
    <option value="area1">北日本</option>
    <option value="area2">東日本</option>
    <option value="area3">西日本</option>
    <option value="area4">沖縄･奄美</option>
  </select>
  <input type="submit" name="area_change" value="エリア切替">
</form>

方法 1 : JavaScript にボタンを押してもらう

onchange イベント内で name 属性を指定してクリックイベントを起こす。
この場合はエリア切替ボタンを置いとかなきゃいけないので CSS で隠したりする。

<form method="post" action="">
  <select name="area" onchange="this.form.elements['area_change'].click()">
    <option value="area1">北日本</option>
    <option value="area2">東日本</option>
    <option value="area3">西日本</option>
    <option value="area4">沖縄･奄美</option>
  </select>
  <input type="submit" name="area_change" value="エリア切替">
</form>

方法 2 : ボタン属性を hidden にして onchange イベントで飛ばす

一番スマートなのはこれ。

<form method="post" action="">
  <select name="area" onchange="submit(this.form)">
    <option value="area1">北日本</option>
    <option value="area2">東日本</option>
    <option value="area3">西日本</option>
    <option value="area4">沖縄･奄美</option>
  </select>
  <input type="hidden" name="area_change" value="エリア切替">
</form>

submit ボタン自体が submit である必要がなくなる。