PHP Mysql submission form with cascading dropdowns

Question

I have been attempting to set up a submission form for my gaming community. We track ships in a game and I have got the form in shape. It is now submitting information correctly to the database; however, I am attempting to find a way to trim down the second drop down box to be dependent off the first. For example, I have provided the code for the form I am using and in it there are 5 fields;

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

Ship Class and Ship Type are drop down boxes.

I am looking to make them cascade so that if for example

 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. 

I have searched around google for a solution to this yet it seems to be eluding me, am I correct in assuming the second drop down must be based on relational tables? Also, would that need a separate query to do so?

    <?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

If you don't mind the additional round-trip call, an ajax call on the select (using jQuery or similar to make it a lot easier) would work nicely.

However, I would probably generate a simple multi-dimensional array in JS during your PHP build, and add some JS in the Ship Class change event that refills the ship-type based on the info in that array. A bit more complex than that ajax call, but avoids the additional server call(s).