台扣啵的研究日誌

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="selectboxes.js"></script>

<script type="text/javascript" src="index.js"></script>

<h3>主機 - 類型 - 遊戲（預設值：XBOX360／FPS／刺客聯盟）</h3>



<p>

<select id="select1">

<option value="">請選擇</option>

<?php

    // 資料庫設定

    $host_sql = 'localhost';

    $username_sql = 'username';

    $password_sql = 'password';

    

    // 聯結資料庫

    $link = mysql_connect($host_sql, $username_sql, $password_sql) or die('無法連結資料庫');

    mysql_select_db('selectboxes', $link);

    mysql_query('SET NAMES UTF8');



    // 動態取得第一階層下拉式選單

    $query = 'SELECT id, name FROM games WHERE levelNum = 1';

    $result = mysql_query($query, $link);

    while ($row = mysql_fetch_assoc($result)) {

        echo '<option value="' . $row['id'] . '">' . $row['name'] . '</option>' . "\n";

    }



?>

</select>

<select id="select2">

<option value="">請選擇</option>

</select>

<select id="select3">

<option value="">請選擇</option>

</select>

<!-- 利用隱藏欄位指定預設的選項 -->

<input id="fullIdPath" type="hidden" value="3,8,24" />

</p>

<?php



    // 資料庫設定

    $host_sql = 'localhost';

    $username_sql = 'username';

    $password_sql = 'password';



    // 聯結資料庫

    $link = mysql_connect($host_sql, $username_sql, $password_sql) or die('無法連結資料庫');

    mysql_select_db('selectboxes', $link);

    mysql_query('SET NAMES UTF8');



    // 預設選項

    $data['0'] = '請選擇';



    // 只有在 parentId 與 levelNum 都存在的情況下，才進行資料庫的搜尋

    if (0 !== (int) $_GET['id'] && 0 !== (int) $_GET['lv']) {

        $parentId = (int) $_GET['id'];

        $levelNum = (int) $_GET['lv'];

        

        $query = sprintf("SELECT id, name FROM games WHERE parentId = %d AND levelNum = %d", $parentId, $levelNum);

        $result = mysql_query($query, $link);

        while ($row = mysql_fetch_assoc($result)) {

        

            // 將取得的資料放入陣列中

            $data[$row['id']] = $row['name'];

        }

    }

    

    // 將陣列轉換為 json 格式輸入

    echo json_encode($data);

$(function () {



    // 判斷是否有預設值

    var defaultValue = false;

    if (0 < $.trim($('#fullIdPath').val()).length) {

        $fullIdPath = $('#fullIdPath').val().split(',');

        defaultValue = true;

    }

    

    // 設定預設選項

    if (defaultValue) {

        $('#select1').selectOptions($fullIdPath[0]); 

    }

    

    // 開始產生關聯下拉式選單

    $('#select1').change(function () {

        // 觸發第二階下拉式選單

        $('#select2').removeOption(/.?/).ajaxAddOption(

            'action.php', 

            { 'id': $(this).val(), 'lv': 2 }, 

            false, 

            function () {

                

                // 設定預設選項

                if (defaultValue) {

                    $(this).selectOptions($fullIdPath[1]).trigger('change');

                } else {

                    $(this).selectOptions().trigger('change');

                }

            }

        ).change(function () {

            // 觸發第三階下拉式選單

            $('#select3').removeOption(/.?/).ajaxAddOption(

                'action.php', 

                { 'id': $(this).val(), 'lv': 3 }, 

                false, 

                function () {

                

                    // 設定預設選項

                    if (defaultValue) {

                        $(this).selectOptions($fullIdPath[2]);

                    }

                }

            );

        });





    }).trigger('change');



    // 全部選擇完畢後，顯示所選擇的選項

    $('#select3').change(function () {

        alert('主機：' + $('#select1 option:selected').text() + 

              '／類型：' + $('#select2 option:selected').text() +

              '／遊戲：' + $('#select3 option:selected').text());

    });

});