jQuery と AJAX を使用して動的カスケード ドロップダウン ボックスを作成する方法

動的カスケード ドロップダウン ボックス

この例では、次の内容に基づいて 2 番目のドロップダウン ボックスを設定する動的ドロップダウン ボックスの作成を示します。最初のドロップダウン ボックスの選択必須。

説明:

1. 最初のドロップダウン ボックス:

   • が含まれますユーザーが選択するオプション。
   • ユーザーが選択したとき

2. jQuery/AJAX:

   • 変更イベントは、AJAX リクエストをトリガーして、別の PHP ファイル (例: update.php)。
   • 選択された値最初のドロップダウン ボックスの内容がリクエストとともに送信されます。

3. update.php:

   • を受け取ります。最初のドロップダウン ボックスから選択した値。
   • クエリを実行して、2 番目のドロップダウン ボックスに関連するオプションを取得します。ドロップダウン ボックス。
   • データを JSON 形式でフォーマットし、AJAX 呼び出しに返します。

4. AJAX 成功関数:

   • JSON 応答を受信し、2 番目の応答を設定します関連するオプションを含むドロップダウン ボックス。

例コード:

tester.php:

<select name="gender"></select>

upda te.php:

if (!empty($_GET['id']) && !empty($_GET['value'])) {
    $id = $_GET['id'];
    $value = $_GET['value'];

    $sql = "SELECT * FROM `category` WHERE `master` = ?";
    $statement = $objDb->prepare($sql);
    $statement->execute(array($value));
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($list)) {
        $out = array('<option value="">Select one</option>');

        foreach ($list as $row) {
            $out[] = '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }

        echo json_encode(array('error' => false, 'list' => implode('', $out)));
    } else {
        echo json_encode(array('error' => true));
    }
} else {
    echo json_encode(array('error' => true));
}

メカニズム:

1. 時ユーザーが最初のドロップダウン ボックスからオプションを選択すると、その値が取得されます。
2. AJAX リクエストが update.php に対して行われ、選択された値が伝えられます。
3. update.php は、 2 番目のドロップダウン ボックスに適切なオプションを指定し、JSON 形式で返します。
4. AJAX 成功関数は、2 番目のドロップダウン ボックスで選択されたオプションを更新し、 Dynamic.

次の手順に従うことで、データ選択のための使いやすく応答性の高いインターフェイスを提供するカスケード ドロップダウン ボックスを作成できます。

以上がjQuery と AJAX を使用して動的カスケード ドロップダウン ボックスを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。