JonJon
Reputation: 27
Hiding options in one dropdown depending on selection in another
I have a web form & database system setup and is fit for purpose. The user selects a station from the first dropdown and then they have to select an error code from the next dropdown.
There is one complaint however, once the selection is chosen from the “Station” dropdown the error codes are still displayed for all of the other stations also.
It would be ideal if only the error codes corresponding to the selection from the “Station” dropdown were displayed.
I believe jQuery could help me out here but I’m more up to speed with PHP/ MySql rather than jQuery, can anyone help?
Dropdown for "Station"
<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>
Dropdown for "Error Code"
<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>
Upvotes: 2
Views: 82
Answers (3)
Zakaria Acharki
Reputation: 67505
try this one, hidding all the errors firstly then show the error codes related to the Station, everytime the user change station hide all and show just associated error codes.
$(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>Upvotes: 3
Gregg Duncan
Reputation: 2725
It's easiest to Clone the "Errors" select then pull the html from the optgroup on station select change. You may have to tweek the html of your Errors so that the optgroup label matches the value from your station. (creating 2 optgroups out of "cleaner 1 & 2") But the opt groups will never show anyway except before a station is selected. 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);
});
});
Upvotes: 3
Lynch
Reputation: 910
// 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();
}
});
That should do the trick, you would have to make sure that the value attributes in the first dropdown matched up with the label attributes in the second dropdown however.
Upvotes: 3
Related Questions
- Hide drop-down box on basis of text result using javascript
- Hide some options from dropdown 2 when selected in dropdown 1 and vice versa
- Show and hide a dropdown if another dropdown is selected
- Hide a select based on the value of another select
- hide dropdown option on change of another dropdown option
- Hide an option in a dropdown menu, when a specific option has been selected in another menu
- Hide select options depending on value of another select
- second dropdown based on selection of first dropdown using script and PHP/MySQL
- how to hide and show select options for another select option bar
- hide option select value based on option value selected on first options