【超便利】PHPで複数選択ドロップダウンメニューの選択値をデータベースに保存する方法

2024-06-26

PHPで複数選択ドロップダウンメニューの選択値を取得する方法

必要なもの

Webサーバー (Apache、Nginxなど)
PHPがインストールされた環境
テキストエディタ (Visual Studio Code、Sublime Textなど)

手順

HTMLフォームを作成する

以下のHTMLコードは、fruitsという名前のドロップダウンメニューを作成し、4つの選択肢を提供します。このドロップダウンメニューでは、ユーザーは複数の果物を選択することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複数選択ドロップダウンメニュー</title>
</head>
<body>
  <h1>好きな果物を選んでください</h1>
  <form action="process.php" method="post">
    <select name="fruits[]" multiple>
      <option value="apple">りんご</option>
      <option value="banana">バナナ</option>
      <option value="orange">オレンジ</option>
      <option value="grape">ぶどう</option>
    </select>
    <input type="submit" value="送信">
  </form>
</body>
</html>

PHPスクリプトを作成する

process.phpという名前のPHPスクリプトを作成し、送信されたフォームデータを取得します。このスクリプトでは、$_POSTスーパーグローバル変数を使用して、fruitsという名前の配列に選択された果物の値を格納します。

<?php
// 送信されたフォームデータを取得
$fruits = $_POST['fruits'];

// 選択された果物を出力
if (count($fruits) > 0) {
  echo "あなたは以下の果物を選びました: ";
  foreach ($fruits as $fruit) {
    echo $fruit . ", ";
  }
} else {
  echo "果物を選んでいません。";
}
?>

補足

name属性に[]を必ず追加する必要があります。これにより、PHPは選択されたすべての値を配列として受け取ることができます。
$_POST変数は、フォームが送信された場合にのみ使用できます。
選択された値の処理は、自由に記述することができます。例えば、データベースに保存したり、メールで送信したりすることができます。

HTMLフォーム (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複数選択ドロップダウンメニュー</title>
</head>
<body>
  <h1>好きな果物を選んでください</h1>
  <form action="process.php" method="post">
    <select name="fruits[]" multiple size="4">
      <option value="apple">りんご</option>
      <option value="banana">バナナ</option>
      <option value="orange">オレンジ</option>
      <option value="grape">ぶどう</option>
      <option value="strawberry">いちご</option>
      <option value="melon">メロン</option>
    </select>
    <input type="submit" value="送信">
  </form>
</body>
</html>

このHTMLコードでは、以下の変更を行いました。

size属性を追加して、ドロップダウンメニューの表示サイズを4行に変更しました。
選択肢として、"いちご"と"メロン"を追加しました。

PHPスクリプト (process.php)

<?php
// 送信されたフォームデータを取得
$fruits = $_POST['fruits'];

// 選択された果物を配列として保持
$selectedFruits = [];

// 選択された果物がある場合は、配列に追加
if (count($fruits) > 0) {
  foreach ($fruits as $fruit) {
    $selectedFruits[] = $fruit;
  }
}

// 選択された果物を出力
if (count($selectedFruits) > 0) {
  echo "あなたは以下の果物を選びました: ";
  foreach ($selectedFruits as $fruit) {
    echo $fruit . ", ";
  }
} else {
  echo "果物を選んでいません。";
}
?>

選択された果物を保持するために、$selectedFruitsという空の配列を作成しました。
foreachループを使用して、$fruits配列の各要素を$selectedFruits配列に追加しました。
選択された果物がある場合は、","で区切って出力するようにしました。

実行方法

このサンプルコードは、基本的な動作のみを示しています。必要に応じて、エラー処理やデータベースへの保存処理などを追加することができます。

複数選択ドロップダウンメニューの選択値を取得するその他の方法

JavaScriptを使用して、ドロップダウンメニューの変更イベントを検知し、選択された値をPHPスクリプトに送信することができます。この方法の利点は、ページを再読み込みすることなく、ユーザーが選択を変更したときに即座に値を取得できることです。

例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複数選択ドロップダウンメニュー</title>
  <script>
    function getSelectedFruits() {
      const fruits = document.getElementById('fruits').selectedOptions;
      const selectedFruits = [];
      for (const fruit of fruits) {
        selectedFruits.push(fruit.value);
      }
      return selectedFruits;
    }

    function submitForm() {
      const selectedFruits = getSelectedFruits();
      const formData = new FormData();
      for (const fruit of selectedFruits) {
        formData.append('fruits[]', fruit);
      }

      fetch('process.php', {
        method: 'POST',
        body: formData
      })
      .then(response => response.text())
      .then(text => {
        document.getElementById('result').innerHTML = text;
      });
    }
  </script>
</head>
<body>
  <h1>好きな果物を選んでください</h1>
  <select id="fruits" name="fruits[]" multiple size="4">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
    <option value="grape">ぶどう</option>
    <option value="strawberry">いちご</option>
    <option value="melon">メロン</option>
  </select>
  <button onclick="submitForm()">送信</button>
  <div id="result"></div>
</body>
</html>

<?php
// 送信されたフォームデータを取得
$fruits = $_POST['fruits'];

// 選択された果物を配列として保持
$selectedFruits = [];

// 選択された果物がある場合は、配列に追加
if (count($fruits) > 0) {
  foreach ($fruits as $fruit) {
    $selectedFruits[] = $fruit;
  }
}

// 選択された果物を出力
if (count($selectedFruits) > 0) {
  echo "あなたは以下の果物を選びました: ";
  foreach ($selectedFruits as $fruit) {
    echo $fruit . ", ";
  }
} else {
  echo "果物を選んでいません。";
}
?>

jQueryライブラリを使用すると、JavaScriptによるDOM操作をより簡単に記述することができます。前述の例をjQueryで書き換えると、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複数選択ドロップダウンメニュー</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#fruits').change(function() {
        const selectedFruits = $(this).val();
        $.ajax({
          url: 'process.php',
          method: 'POST',
          data: { fruits: selectedFruits },
          success: function(response) {
            $('#result').html(response);
          }
        });
      });
    });
  </script>
</head>
<body>
  <h1>好きな果物を選んでください</h1>
  <select id="fruits" name="fruits[]" multiple size="4">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
    <option value="grape">ぶどう</option>
    <option value="strawberry">いちご</option>
    <option value="melon">メロン</option>
  </select>
  <div id="result"></div>
</body>
</html>

<?php
// 送信されたフォームデータを取得
$fruits = $_

php html drop-down-menu

【超便利】PHPで複数選択ドロップダウンメニューの選択値をデータベースに保存する方法

PHPで複数選択ドロップダウンメニューの選択値を取得する方法

複数選択ドロップダウンメニューの選択値を取得するその他の方法

【初心者向け】JavaScriptで動的にscript要素を追加する3つの方法

ドラッグでゴーストが出ないのはなぜ？CSSとJavaScriptでドラッグゴースト画像を非表示にする仕組み

CSS background-sizeとbackground-positionで背景画像を幅に合わせ、高さを自動調整する

もう悩まない！HTML、CSS、マージンでインラインブロックdivの隙間を自由自在に操る

FTPクライアント、Webブラウザ拡張機能、curl、wgetを使ってファイルをダウンロードする方法