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

PHPMYSQL動的選択ボックス

    上記のように、最初にphpを使用してno1selectメニューを作成します。次に、「change」eventListenerを次のように追加します。

    $('#select1').change(createSelect2);
    
    function createSelect2(){
        var option = $(this).find(':selected').val(),
        dataString = "option="+option;
        if(option != '')
        {
            $.ajax({
                type     : 'GET',
                url      : 'http://www.mitilini-trans.gr/demo/test.php',
                data     : dataString,
                dataType : 'JSON',
                cache: false,
                success  : function(data) {            
                    var output = '<option value="">Select Sth</option>';
    
                    $.each(data.data, function(i,s){
                        var newOption = s;
    
                        output += '<option value="' + newOption + '">' + newOption + '</option>';
                    });
    
                    $('#select2').empty().append(output);
                },
                error: function(){
                    console.log("Ajax failed");
                }
            }); 
        }
        else
        {
            console.log("You have to select at least sth");
        }
    }
    

    これで、no2選択メニューに、選択1選択オプションに応じた新しいオプションが追加されました。

    そしてphpファイル:

    <?php
    header('Content-Type: application/json; charset=utf-8');
    header('Access-Control-Allow-Origin: *');
    
    if(isset($_GET['option']))
    {
        $option = $_GET['option'];
    
        if($option == 1)
        {
            $data = array('Arsenal', 'Chelsea', 'Liverpool');
        }
        if($option == 2)
        {
            $data = array('Bayern', 'Dortmund', 'Gladbach');
        }       
        if($option == 3)
        {
            $data = array('Aek', 'Panathinaikos', 'Olympiakos');
        }
    
        $reply = array('data' => $data, 'error' => false);
    }
    else
    {
        $reply = array('error' => true);
    }
    
    $json = json_encode($reply);    
    echo $json; 
    ?>
    

    もちろん、ここではいくつかのデモデータを使用していますが、SQLクエリで$ data配列にデータを入力し、適切なヘッダーを使用してjsonとして送信することができます。最後に、2番目の選択メニューにもう少しjsを使用します:

    $('#select2').change(selectSelect2);
    
    function selectSelect2(){
        var option = $(this).find(':selected').val();
        if(option != '')
        {
            alert("You selected: "+option);
        }
        else
        {
            alert("You have to select at least sth");
        }
    }
    

    こちらをチェック http://jsfiddle.net/g3Yqq/2/ 実例



    1. クエリの結果をMySQLの変数に設定します

    2. 正しくエンコードされていないデータを含むMySQLテーブルをUTF-8に変換する

    3. PostgreSQLスキーマ/Djangoを使用した名前空間

    4. SQL Serverで同等のINSTR()