具有级联下拉菜单的 PHP Mysql 提交表单

Question

我一直在尝试为我的游戏社区设置提交表单。我们在游戏中跟踪船只，我已经得到了形状。它现在正在正确地向数据库提交信息；但是，我正在尝试找到一种方法来减少第二个下拉框以依赖于第一个。例如，我提供了我正在使用的表单的代码，其中有 5 个字段；

Ship ID, 
Ship Class,
 Ship Type,
 Ship Owner, 
Ship Name.

Ship Class 和 Ship Type 是下拉框。

我希望让它们级联，以便如果 例如

 I choose Battleship the second drop down would populate 
with only Battleship 1, Battleship 2, and Battleship 3 and not the rest of fields
 in the second drop down. 

我已经在 google 上搜索了一个解决方案，但它似乎在逃避我，我是否正确假设第二个下拉列表必须基于关系表？另外，这样做是否需要单独的查询？

    <?php
    /* submit the application */

        /* get today's date */
        $today = getdate();

        /* build the insert query that's going to be used */
        $insert = "INSERT INTO ship_registry ( shipID, shipClass, shipType,  shipOwner, shipName ) ";
        $insert.= "VALUES ( %s, %s, %s, %s, %s ) ";

        /* run the query through sprintf and the safety function to scrub for   security issues */
        $query = sprintf(
            $insert,
            escape_string( $_POST['shipID'] ),
            escape_string( $_POST['shipClass'] ),
            escape_string( $_POST['shipType'] ),
            escape_string( $_POST['shipOwner'] ),
            escape_string( $_POST['shipName'] ),
            escape_string( $today[0] )
        );

        /* run the query */
        $result = mysql_query( $query );
    /* close the if statement on submitting the application */

    ?>

    <div class="body">

        <?

        $check = new QueryCheck;
        $check->checkQuery( $result, $query );

        if( !empty( $check->query ) ) {
            $check->message( "entry", "submit" );
            $check->display();
        }

        ?>
        <span class="fontTitle">Submit Ship</span>
        <br /><br />

        <table>
        <form method="post" action="<?=$webLocation;?>index.php?page=addship">
            <tr>
                <td class="tableCellLabel">Ship ID</td>
                <td>&nbsp;</td>
                <td><input id="product" type="text" class="image" maxlength="7" name="shipID" /></td>
            </tr>
            <tr>
                <td class="tableCellLabel">Ship Class</td>
                <td>&nbsp;</td>
                <td>
                    <select name="shipClass">
                        <option value="Battleship">Battleship</option>
                        <option value="Battlecruiser">Battlecruiser</option>
                        <option value="Cruiser">Cruiser</option>
                        <option value="Destroyer">Destroyer</option>
                        <option value="Frigate">Frigate</option>                
                    </select>
                </td>
            </tr>
            <tr>
                <td class="tableCellLabel">Ship Type</td>
                <td>&nbsp;</td>
                <td>
                    <select name="shipType">
                        <option value="Battleship 1">Battleship 1</option>
                        <option value="Battleship 2">Battleship 2</option>
                        <option value="Battleship 3">Battleship 3</option>
                        <option value="Battlecruiser 1">Battlecruiser 1</option>
                        <option value="Battlecruiser 2">Battlecruiser 2</option>
                        <option value="Battlecruiser 3">Battlecruiser 3</option>
                        <option value="Cruiser">Cruiser</option>
                        <option value="Cruiser">Cruiser</option>
                        <option value="Cruiser">Cruiser</option>
                        <option value="Destroyer 1">Destroyer 1</option>
                        <option value="Destroyer 2">Destroyer 2</option>
                        <option value="Destroyer 3">Destroyer 3</option>
                        <option value="Frigate 1">Frigate 1</option>
                        <option value="Frigate 2">Frigate 2</option>
                        <option value="Frigate 3">Frigate 3</option>                    
                    </select>           
                </td>   
            </tr> 
            <tr>
                <td class="tableCellLabel">Ship Owner</td>
                <td>&nbsp;</td>
                <td><input type="text" class="image" maxlength="64" name="shipOwner" /></td>
            </tr>
                <tr>
                <td class="tableCellLabel">Ship Name</td>
                <td>&nbsp;</td>
                <td><input type="text" class="image" maxlength="64" name="shipName" /></td>
            </tr>

            <tr>
                <td colspan="2"></td>
                <td>
                    <strong class="yellow">Please make sure all information is entered correctly before submitting.</strong></b><br />
                </td>
            </tr>
            <tr>
                <td colspan="3" height="10"></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td><input type="image" src="<?=$webLocation;?>skins/<?=$skinChoice;?>/buttons/submit.png" name="action" class="button" value="Submit" /></td>
            </tr>
        </form>
        </table>


    </div> <!--Close the div body class tag-->

Answer 1

如果您不介意额外的往返调用，那么对 select 进行 ajax 调用（使用 jQuery 或类似方法使其更容易）会很好地工作。

但是，我可能会在您的 PHP 构建期间在 JS 中生成一个简单的多维数组，并在 Ship Class 更改事件中添加一些 JS，该事件根据该数组中的信息重新填充 ship-type。比 ajax 调用复杂一点，但避免了额外的服务器调用。