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

【问题标题】：Hiding options in one dropdown depending on selection in another根据另一个下拉菜单中的选择隐藏选项
【发布时间】：2015-10-16 15:21:29
【问题描述】：

我有一个 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>

【问题讨论】：

    标签： javascript php jquery mysql


    【解决方案1】：

    最简单的方法是克隆“错误”选择，然后在站选择更改时从 optgroup 中提取 html。您可能需要修改错误的 html，以便 optgroup 标签与您的站点中的值匹配。 （从“cleaner 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);
    });
});

    【讨论】：

    • 感谢格雷格！
    【解决方案2】： 
    // 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();
    }

});

    这应该可以解决问题，但是您必须确保第一个下拉列表中的值属性与第二个下拉列表中的标签属性匹配。

    【讨论】：

      【解决方案3】：

      试试这个，先隐藏所有错误然后显示与站相关的错误代码，每次用户更换站时都隐藏所有并只显示相关的错误代码。

      $(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");
    });
});
      .hidden{
    display: none;
}
      <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>

      【讨论】：

      • 感谢您的帮助 Zakaria！
      • 您好 Zakaria，再次感谢您的帮助。我注意到带有下划线的电台或用驼峰写的电台不会显示错误代码。你知道为什么会这样吗？ “工作站不显示错误代码”Au_Au、Cleaner_1、Cleaner_2、Cure_Oven、EpoxyDotDispense、GoldBallBonder、MechanicalExcise、Misc、PlasmaClean、Underfill_1、Underfill_2、Underfill_3、Underfill_4
      • 是的，我明白了，因为我们使用错误代码 optgroup 的标签，但不幸的是在某些情况下语句的值不等于该标签。例如：&lt;optgroup label="Cleaner 1 &amp; 2"&gt; 和 station 的值 = Cleaner_1 或 Cleaner_1。
      • 啊完美，感谢您的指导，我将更新我的代码。亲切的问候。
      • 该死！它在 Chrome 和 Fire fox 中运行良好，但在 IE11 中运行良好。每个人都在这里使用的浏览器。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-14
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode