Conditional Drop-down Menu for Form


#1

Is there a way to have my “State” drop-down menu only show when the US is selected? Same goes for Canada?


#2

Hey @edang, is this for a form?


#3

Yes, whoops, should’ve clarified that.


#4

@edang you should be able to do this with some conditional CSS. Let me see if I can dig up some old code for you!


#5

@Stefano were you able to find anything?


#6

Sorry for the late reply. Looks like this was used on a page that is no longer active. I’m going to attempt to locate the files and (hopefully) get you the script by end of day.

Sorry for the delay!


#7

Any luck? So sorry for bugging. We are waiting to launch a campaign.


#8

No luck - sorry about that :frowning:

Maybe @Hristian or @digibomb can chime in?


#9

I unfortunately do not have an answer here either - sorry.


#10

Anyway of getting the content from this old forum? Conditional Forms (aka Form Logic)


#11

Hey edang

This is possible but it may require a bit of conditional code depending on how many fields you are showing/hiding. There also may be some visual side effects.

One being that the other elements/fields on the page do not re-adjust or re-align when an element is hidden. This is because elements on your pages are not relatively positioned, but are positioned with exact coordinates.

I don’t have a plug and play script for you, but if you want to try whipping something up yourself, here’s a script to guide you in the right direction.

<script>
  $("#country").live('change', function() {

  switch ($(this).val()) {

    case 'United States':
      	// Add code here to show and hide fields
        break;
    case 'Canada':
     	// Add code here to show and hide fields
        break;
    default:
        // Add code here to hide all fields
  }

});

</script>

I’d suggest looking into jQuerys .hide and .show methods for actually hiding/showing the fields

http://api.jquery.com/hide/
http://api.jquery.com/show/

Hope that helps!