根据另一个下拉列表中的选择隐藏一个下拉列表中的选项

时间：2015-10-16 15:21:30

标签： javascript php jquery mysql

我有一个网络表格＆amp;数据库系统设置，适合用途。用户从第一个下拉列表中选择一个工作站，然后他们必须从下一个下拉列表中选择一个错误代码。

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

我相信jQuery可以帮助我，但是我更加快速使用PHP / MySql而不是jQuery，有人可以帮忙吗？

＆＃34; Station＆＃34;

的下拉菜单 
<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>

下拉＆＃34;错误代码＆＃34; 

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

3 个答案:

答案 0 :(得分：3)

// This fires any time the STATION select box is changed
$("#STATION").on("change", function() {

    // Find the chosen station (or blank if nothing selected)
    var station = $(this).find(":selected").val();

    // Hide and show the optgroups in the second dropdown accordingly
    if(station != "")
    {
        // Hides all optgroups, then shows only the selected one
        $("#ERROR").children("optgroup").hide(); // Hide all
        $("#ERROR").children("optgroup[label='" + station + "']").show();
    }
    else 
    {
        // If they change back to the 'Choose a station' option, show everything
        $("#ERROR").children("optgroup").show();
    }

});

应该这样做，你必须确保第一个下拉列表中的值属性与第二个下拉列表中的标签属性相匹配。

答案 1 :(得分：3)

尝试这个，首先隐藏所有错误，然后显示与工作站相关的错误代码，每次用户更改工作站隐藏所有错误并显示相关的错误代码。

＆＃13;
＆＃13; 
$(function(){
  
    //Hide all error codes
    $('#ERROR optgroup').addClass('hidden');
  
    //Handel Station change event
    $('#STATION').on('change',function()
    {
        //Hide all error codes
        $('#ERROR optgroup').addClass('hidden');
      
        //Show the associate Error codes related with the shoosen station
        $('#ERROR optgroup[label="'+$(this).val()+'"]').removeClass("hidden");
    });
});
＆＃13; 
.hidden{
    display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
        <option value="" disabled selected>--Select a Error Code--    </option>
        <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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：3)

最简单的方法是克隆“错误”选择，然后从工作站选择更改中的optgroup中拉出html。您可能需要调整错误的html，以便optgroup标签与您工作站的值匹配。 （从“清洁1＆amp; 2”中创建2个optgroup）但是除了选择电台之外，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);
    });
});
相关问题
最新问题