Link to home
Create AccountLog in
Avatar of catonthecouchproductions
catonthecouchproductionsFlag for United States of America

asked on

Hide/show based on selected value of 2 dropdowns

What is the best way to do this:

I have 2 select boxes, one is shipment type code and another is action code. Say if shipment type code =  02 and action code = add then show 3 fields.

I get the hide/show and I have the field data (the label and input or select wrapped in a div with a class)

Not sure how the best way to say if dropdown A and dropdown B = this value then show/hide these boxes, then as a default SHOW or HIDE them all. so if you choose one that doesnt toggle revert for all fields show.


Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

function testShow(theForm) {
  var sel1=theForm.shipment.options[theForm.shipment.selectedIndex].value;
  var sel2=theForm.actioncode.options[theForm.actioncode.selectedIndex].value;
  var combined = ""+sel1+sel2; // concatenate values but keep as strings

<select onchange="testShow(this.form)" name="shipment">
<select onchange="testShow(this.form)" name="actioncode">

Avatar of catonthecouchproductions


I am working with jQuery on this application, but I can work this in to the rest..

"02add" is a class name right?
No! 02 is the shipment value and add the type as defined by you in your question
I have a various set of elements that can qualify for that say:

If shipment code is equal to 02,03,04 and action code is equal to Add or Remove then HIDE/SHOW these fields.
So please be more specific. When exactly show and when hide. More details means better help
Sorry, hopefully this helps you:

Show the next three fields only if the Action Code is "Add" or "Replace" and
Shipment Type Code = 01, 02, 07, 08 or 10

I am trying to code this in jQuery, i have some of it done already.

That is the main criteria, the markup for both of those dropdowns are here:

<label for="isf_action_code"> Action Code: </label>
                <select id="isf_action_code" name="isf_action_code" class="req select">
                    <option value="">Select One...</option>
                    <option value="A" class="isfToggleActionCode">Add</option>
                    <option value="D">Delete</option>
                    <option value="R" class="isfToggleActionCode">Replace</option>

                <label for="isf_type_shipment_code">Type Shipment Code: </label>
                <select id="isf_type_shipment_code" name="isf_type_shipment_code" class="req select">
                    <option value="">Select One...</option>
                    <option value="01">Standard or regular filings</option>
                    <option value="02">To Order Shipments</option>
                    <option value="03">Household Goods / Personal Effects (HHG / PE)</option>
                    <option value="04">Military, Government</option>
                    <option value="05">Diplomatic Shipment</option>
                    <option value="06">Carnet</option>
                    <option value="07">US Goods Returned</option>
                    <option value="08">FTZ Shipments</option>
                    <option value="09">International Mail Shipments</option>
                    <option value="10">Outer Continental Shelf Shipments</option>

Open in new window

So you need something like this - I am really not up to scratch on jQuery yet

$("select").each().change(function() {
  var sel1=$(this).form.shipment.options[$(this).form.shipment.selectedIndex].value;
  var sel2=$(this).form.actioncode.options[$(this).form.actioncode.selectedIndex].value;
  var combined = ""+sel1+sel2; // concatenate values but keep as strings
  if (combined=="02add") $("#someDiv").show(); else $("#someDiv").hide();
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account