ホームページ >バックエンド開発 >PHPチュートリアル >PHP と AJAX を使用して、動的にデータが入力される依存ドロップダウン ボックスを作成する方法

PHP と AJAX を使用して、動的にデータが入力される依存ドロップダウン ボックスを作成する方法

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-11 00:04:10499ブラウズ

How to Create Dynamically Populated Dependent Drop-Down Boxes Using PHP and AJAX?

動的に入力されるドロップダウン ボックス

この例では、2 番目のドロップダウンのオプションが含まれる動的ドロップダウン ボックスを作成することを目的としています。ボックスは、最初のドロップダウン ボックスでの選択内容に応じて異なります。

これは、コード:

tester.php

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#stSelect').change(function() {
                    var sel_stud = $(this).val();
                    $.ajax({
                        type: "POST",
                        url: "another_php_file.php",
                        data: 'theOption=' + sel_stud,
                        success: function(whatigot) {
                            $('#LaDIV').html(whatigot);
                        }
                    });
                });
            });
        </script>
    </head>
<body>

    <select name="students">

another_php_file.php

<?php
$server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
$login = 'root';
$pword = '';
$dbname = 'test';
mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
mysql_select_db($dbname) or die($connect_error);

//Get value posted in by ajax
$sel_stud = $_POST['theOption'];

//Run DB query
if($sel_stud == "Electronics"){
    $query = "SELECT * FROM `category` WHERE `master` = 1";
}elseif($sel_stud == "Clothes"){
    $query = "SELECT * FROM `category` WHERE `master` = 2";
}else{
    $query = "SELECT * FROM `category` WHERE `master` = 3";
}
$result = mysql_query($query) or die('Fn another_php_file.php ERROR: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);

//Prepare response html markup
$r = '
        
        <select>
';

//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
if ($num_rows_returned > 0) {
    while ($row = mysql_fetch_assoc($result)) {
        $r = $r . '<option value="' .$row['id']. '">' . $row['name'] . '</option>';
    }
} else {
    $r = '<p>No Items</p>';
}

echo $r;

この例では、オプション2 番目のドロップダウン ボックスの値は、最初のドロップダウン ボックスで選択された値に基づいて動的に設定されます。カテゴリ テーブルが変更され、2 番目のドロップダウン ボックスのオプションをグループ化するためのマスター フィールドが追加されます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。