javascript - 根据另一个下拉菜单中的选择隐藏选项

Question

我有一个 Web 表单和数据库系统设置，适合使用。用户从第一个下拉列表中选择一个电台，然后他们必须从下一个下拉列表中选择一个错误代码。

然而，有一个提示，一旦从“站”下拉菜单中选择了选项，所有其他站的错误代码仍然会显示。
如果只显示与“站”下拉列表中的选择相对应的错误代码，那将是理想的。

我相信 jQuery 可以帮助我解决这个问题，但我更熟悉 PHP/MySql 而不是 jQuery，有人可以帮忙吗？

“车站”下拉菜单

<h3>Station</h3>
            <select name="STATION" id="STATION">
                <option value="" disabled selected>--Select a Station--    </option>
                <option value="AOI">AOI</option>
                <option value="AqueousCleaner">AqueousCleaner</option>
                <option value="Au_Au">Au_Au</option>
                <option value="CFA">CFA</option>
                <option value="Cleaner_1">Cleaner_1</option>
                <option value="Cleaner_2">Cleaner_2</option>
                <option value="Conveyor">Conveyor</option>
                <option value="Cure_Oven">Cure_Oven</option>
                <option value="Dage">Dage</option>
                <option value="DEK">DEK</option>
                <option value="EAS">EAS</option>
                <option value="EpoxyDotDispense">EpoxyDotDispense</option>
                <option value="GoldBallBonder">GoldBallBonder</option>
                <option value="GSI">GSI</option>
                <option value="GSMX">GSMX</option>
                <option value="LaserMark">LaserMark</option>
                <option value="LPKF">LPKF</option>
                <option value="MechanicalExcise">MechanicalExcise</option>
                <option value="Misc">Misc</option>
                <option value="MPS">MPS</option>
                <option value="Nikon">Nikon</option>
                <option value="Nordson">Nordson</option>
                <option value="PlasmaClean">PlasmaClean</option>
                <option value="PreBakeOven">PreBakeOven</option>
                <option value="Reflow">Reflow</option>
                <option value="RMI">RMI</option>
                <option value="Siemens">Siemens</option>
                <option value="SPI">SPI</option>
                <option value="Underfill_1">Underfill_1</option>
                <option value="Underfill_2">Underfill_2</option>
                <option value="Underfill_3">Underfill_3</option>
                <option value="Underfill_4">Underfill_4</option>
                <option value="UV_Cure">UV_Cure</option>
            </select>

“错误代码”下拉列表

<h3>Error Code</h3>
            <td>
            <select name ="ERROR" id ="ERROR">
            <optgroup label="AOI">
                <option>Camera</option>
                <option>Conveyor</option>
                <option>Axis_Control</option>
                <option>PSU</option>
                <option>Software</option>
                <option>Watchdog</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="AqueousCleaner">
                <option>Nozzles</option>
                <option>Detergent</option>
                <option>Pump</option>
                <option>PSU</option>
                <option>Software</option>
                <option>Watchdog</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="Au-Au">
                <option>Software_Crash</option>
                <option>Ultrasonic_Issue</option>
                <option>Fiducial_Error</option>
                <option>Axis_Fault</option>
                <option>Stage_Vacuum_Error</option>
                <option>Watchdog_Error</option>
            </optgroup>
            <optgroup label="CFA">
                <option>Software</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="Cleaner 1 & 2">
                <option>Basket_Crash</option>
                <option>Solvent_level_Issue</option>
                <option>Transport_Issue</option>
                <option>Refrigeration_Fault</option>
                <option>Heater_Fault</option>
                <option>Watchdog_Error</option>
            </optgroup>
            <optgroup label="Conveyor">
                <option>Conveyor</option>
                <option>Axis_Control</option>
                <option>PSU</option>
                <option>Software</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="Cure Oven">
                <option>Watchdog_Error</option>
                <option>Conveyor_Alarm</option>
                <option>Heater_Alarm</option>
                <option>Blower_Fan</option>
                <option>Software_Crash</option>
            </optgroup>
            <optgroup label="Dage">
                <option>Hook</option>
                <option>Cartridge</option>
                <option>Software</option>
                <option>Pnuematic</option>
            </optgroup>
            <optgroup label="DEK">
                <option>Conveyor</option>
                <option>Squeegee_Blade</option>
                <option>Fiducial_Read_Error</option>
                <option>Watchdog_Error</option>
                <option>Camera</option>
                <option>Axis_Control</option>
                <option>PSU</option>
                <option>Software</option>
                <option>Watchdog</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="EAS">
                <option>Misc</option>
            </optgroup>
            <optgroup label="Epoxy Dot Dispense">
                <option>Broken_Needle</option>
                <option>Axis_Fault</option>
                <option>Defective_Pump</option>
                <option>Head_Crash</option>
                <option>Software_Crash</option>
                <option>Vision_Fault</option>
                <option>Watchdog_Error</option>
            </optgroup>
            <optgroup label="Gold Ball Bonder">
                <option>Software</option>
                <option>Fiducial</option>
                <option>Heaters</option>
                <option>Vacuum</option>
                <option>Wire_Spool</option>
                <option>Clamps</option>
                <option>Capillary</option>
                <option>Pnuematic_Alarm</option>
                <option>Magazine</option>
                <option>Conveyor</option>
                <option>Magazine_Lift</option>
                <option>Pallet_Transfer</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="GSI">
                <option>Laser</option>
                <option>Conveyor</option>
                <option>Axis_Control</option>
                <option>PSU</option>
                <option>Software</option>
                <option>Watchdog</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="GSMX">
                <option>Tooling</option>
                <option>Feeder_Error</option>
                <option>Nozzle</option>
                <option>Fiducials</option>
                <option>Misplaced_Tab</option>
                <option>Conveyor_Alarm</option>
                <option>Tab_Segregation</option>
                <option>Bent_Leads</option>
                <option>Software_Crash</option>
                <option>Watchdog_Error</option>
            </optgroup>
            <optgroup label="LaserMark">
                <option>Laser</option>
                <option>Conveyor</option>
                <option>Axis_Control</option>
                <option>PSU</option>
                <option>Software</option>
                <option>Watchdog</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="LPKF">
                <option>Laser_Fault</option>
                <option>Extraction_Issue</option>
                <option>Transfer_Issue</option>
                <option>Axis_Fault</option>
                <option>Fiducial_Error</option>
                <option>Not_Excised_Fully</option>
                <option>Vision_Fault</option>
                <option>Software_Crash</option>
                <option>Watchdog_Error</option>
            </optgroup>
            <optgroup label="Mechanical Excise">
                <option>Software_Crash</option>
                <option>Spindle_Pressure_Fault</option>
                <option>Fiducial_Error</option>
                <option>Axis_Fault</option>
                <option>Watchdog_Error</option>
            </optgroup>
            <optgroup label="Miscellaneous">
                <option>Misc</option>
            </optgroup>
            <optgroup label="MPS">
                <option>Camera</option>
                <option>Software</option>
                <option>Watchdog</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="Nikon">
                <option>Axis_Control</option>
                <option>PSU</option>
                <option>Software</option>
                <option>Watchdog</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="Nordson">
                <option>Conveyor</option>
                <option>Sensor</option>
                <option>Vacuum</option>
                <option>Heater</option>
                <option>Blower</option>
                <option>Pnuematic</option>
                <option>Fiducial</option>
                <option>Lift</option>
                <option>Dispense_Nozzle</option>
                <option>Vacuum_Cup</option>
                <option>Weight_Fail</option>
            </optgroup>
            <optgroup label="Plasma Clean">
                <option>Board_Transfer</option>
                <option>Sensor_Alarm</option>
                <option>RF_Generator</option>
                <option>GAS_Flow</option>
                <option>Watchdog_Error</option>
            </optgroup>
            <optgroup label="PreBakeOven">
                <li class="dropdown-header">PreBakeOven
                <option>Heaters</option>
                <option>Blowers</option>
                <option>Chiller</option>
                <option>Conveyor</option>
                <option>PSU</option>
                <option>Software</option>
                <option>Watchdog</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="Reflow">
                <li class="dropdown-header">Reflow
                <option>Heaters</option>
                <option>Blowers</option>
                <option>Chiller</option>
                <option>Conveyor</option>
                <option>PSU</option>
                <option>Software</option>
                <option>Watchdog</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="RMI">
                <option>Software</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="Siemens">
                <option>Feeder</option>
                <option>Nozzle</option>
                <option>Fiducial</option>
                <option>Axis_Control</option>
                <option>Twin_Head</option>
                <option>Star_Head</option>
                <option>Software_Crash</option>
                <option>Watchdog_Error</option>
                <option>Camera</option>
                <option>Conveyor</option>
                <option>MTC</option>
                <option>Good_Bad_Marks</option>
            </optgroup>
            <optgroup label="SPI">
                <option>Camera</option>
                <option>Conveyor</option>
                <option>Axis_Control</option>
                <option>PSU</option>
                <option>Software</option>
                <option>Watchdog</option>
                <option>Misc</option>
            </optgroup>
            <optgroup label="Underfill 1 - 4">
                <option>Blocked_Nozzle</option>
                <option>Damaged_Nozzle</option>
                <option>Axis_Fault</option>
                <option>Defective_Pump</option>
                <option>Heater_Plates</option>
                <option>Broken_Piston</option>
                <option>Head_Crash</option>
                <option>Software_Crash</option>
                <option>Broken_Needle</option>
                <option>Vision_Fault</option>
                <option>Watchdog_Error</option>
            </optgroup>
            <optgroup label="UV_Cure">
                <option>Conveyor</option>
                <option>Sensor</option>
                <option>Bulb</option>
                <option>Controls</option>
                <option>Inter_Lock</option>
                <option>Door</option>
                <option>Misc</option>
            </optgroup>
            </select>

Answer 1

最简单的方法是克隆“错误”选择，然后在站选择更改时从 optgroup 中提取 html。您可能需要调整错误的 html，以便 optgroup 标签与您站中的值相匹配。 (从“清洁器 1 和 2”中创建 2 个 optgroups)但是 opt 组永远不会显示，除非在选择一个站之前。 http://jsfiddle.net/vd9zvbLd/

$(function(){
    var $errors = $('#ERROR').clone();
    $('#STATION').change(function(){
        var station = $(this).val();
        var errs = $errors.find('optgroup[label="' + station + '"]').html();
        $('#ERROR').html(errs);
    });
});