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

Question

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

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

船舶类别和船舶类型是下拉框。

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

 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. 

我已经在谷歌上搜索了这个问题的解决方案，但它似乎在逃避我，我是否正确地假设第二个下拉列表必须基于关系表？另外，是否需要单独的查询来执行此操作？

    <?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 中生成一个简单的多维数组，并在船舶类更改事件中添加一些 JS，根据该数组中的信息重新填充船舶类型。比 ajax 调用复杂一点，但避免了额外的服务器调用。