sql >> データベース >  >> RDS >> Mysql

最初のドロップダウン選択に基づいてHTML/PHPドロップダウンにデータを入力します

    リクエストを使用してPHPファイルを作成し、AJAXを使用して呼び出すことができます。

    getSubCategory.php

    <?php
    $category = "";
    if(isset($_GET['category'])){
        $category = $_GET['category'];
    }
    
    /* Connect to the database, I'm using PDO but you could use mysqli */
    $dsn = 'mysql:dbname=my_database;host=127.0.0.1';
    $user = 'my_user';
    $password = 'my_pass';
    
    try {
        $dbh = new PDO($dsn, $user, $password);
    } catch (PDOException $e) {
        echo 'Connection failed: ' . $e->getMessage();
    }
    
    $sql = 'SELECT sub_category_name as subCategory FROM t_menu_category WHERE category_name = :category';
    $stmt = $dbh->prepare($sql);
    $stmt->bindValue(':category', $category);
    $stmt->execute();
    
    return  json_encode($stmt->fetchAll());
    

    カテゴリが選択されたときにキャッチするjqueryを追加し、対応するサブカテゴリをサーバーに要求します。

    <script>
        $(document).ready(function () {
            $('#item_category').on('change', function () {
    
                //get selected value from category drop down
                var category = $(this).val();
    
                //select subcategory drop down
                var selectSubCat = $('#item_sub_category');
    
                if ( category != -1 ) {
    
                    // ask server for sub-categories
                    $.getJSON( "getSubCategory.php?category="+category)
                    .done(function( result) {    
                        // append each sub-category to second drop down   
                        $.each(result, function(item) {
                            selectSubCat.append($("<option />").val(item.subCategory).text(item.subCategory));
                        });
                        // enable sub-category drop down
                        selectSubCat.prop('disabled', false);                
                    });
    
                } else {                
                    // disable sub-category drop down
                    selectSubCat.prop('disabled', 'disabled');
                }
            });    
    
        });
    </script>
    

    また、最初のオプションに値を追加します:

    <option value="-1" selected="selected">-- Select Category --</option>
    


    1. MySQLブール全文検索を最適化する方法は? (または何に置き換えるのですか?)-C#

    2. 1つのオブジェクトjsonで2つのクエリmysql

    3. 挿入中にC#でSQLの一意の制約違反をキャッチするための最良の方法

    4. PHPでget_result()の代わりにbind_result()を使用する方法