Database populated chained drop down menu

Database populated chained drop down menu

by Thulasi Ram.S

HTML

<form id="shipData" onchange="checkType()" action="/analysis/analysisSummary" method="POST">
    <table width="100%">
        <tr>
            <td width="20%"></td>
            <td width="20%">Type:
                <select id="type" name="type">
                    <option value="All">------ All ------</option>
                    <option value="U">Unanalyzed</option>
                    <option value="H">Pending</option>
                    <option value="F">True Hit</option>
                    <option value="C">Return Reason</option>
                    <option value="S">Parcel Returned</option>
                    <option value="T">Long Term Pending</option>
                    <option value="Z">Value &gt;2500</option>
                </select>
            </td>
            <td width="20%">Forecast ISC:<select id="iscCode" name="iscCode">
                <option value="All">ALL</option>
                <option value="JFK">JFK</option>
                <option value="LAX">LAX</option>
                <option value="MIA">MIA</option>
                <option value="ORD">ORD</option>
                <option value="SFO">SFO</option>
            </select>
            </td>
            <td width="30%">
                <div id="divIscCode" style="display: none;">
                    Actual ISC:
                <select id="sctry" name="iscCode">
                    <option value="All">ALL</option>
                    <option value="JFK">JFK</option>
                    <option value="LAX">LAX</option>
                    <option value="MIA">MIA</option>
                    <option value="ORD">ORD</option>
                    <option value="SFO">SFO</option>
                </select>
                </div>
            </td>
            <td width="8%"></td>
        </tr>
    </table>
</form>

JavaScript

$(document).ready(function () {
            $('#shipData').find('#type').change(function () {
                if ($(this).val() == 'T') {
                    $('#shipData').find('#divIscCode').show();  //To  show only drop down
                    //$('#shipData').find('#sctry').val('All'); //To initial value if required.
                } else {
                    $('#shipData').find('#divIscCode').hide();
                }
            }).trigger('change');
        });