Hiding Dropdowns

The Problem

So you're condensing your form and you come to an item that can be taken orally or via IV but each option has a different set of frequencies. You don't want to create one large frequency dropdown with some options that would be wrong for each. So what do you do?

The Solution

The easiest solution I have found is to create two (or more) dropdowns and hide the one you're not using based on the route selection.
We need to:

• create a route dropdown
• create two frequency dropdowns with the appropriate selections for each route
• create a script to to hide the dropdown not in use based on the route selection

The Code

Our example is for Lasix. You can see the set up functionality if you'll click the "Demo" link at the bottom. The route dropdown is cprompt_31_1 with two options ORAL or IV. And you'll notice I always like to display the easy to read lowercase, even though I pass through the BLOCK CAPS wordage.

    orally
    intravenously

After it are two more dropdowns cprompt_31_2 and crompt_31_3, each holding the frequencies for their respective route. No reason to separate out the values in these, but it was already there and I was too lazy to erase it.

    Q12H
    QDAY
    Q6H
    Q8H
    BID


    Q12H
    QDAY
    Q6H
    Q8H
    ONCE

The JQuery code below simply listens for a change to 31_1, checks to see if it's been changed to "ORAL" and adds and removes the class "hide" from the appropriate checkboxes. The class "hide" is just one line "select.hide{ display:none; }" in the CSS.

// Lasix Frequency Selection

$(function() {
    $("select#cprompt_31_1").change(function() {
        if ($('select#cprompt_31_1 option:selected').val() == "ORAL") {
          
            $("select#cprompt_31_2").removeClass("hide");
            $("select#cprompt_31_3").addClass("hide");
        } else {
            $("select#cprompt_31_2").addClass("hide");
            $("select#cprompt_31_3").removeClass("hide");
        }
    });
});

So we achieve this effect with one line of CSS and just a dozen lines of script. If you have more than two options for your "route" dropdown (and really you can use this same functionality fifty different places, it doesn't have to be route) you just need to add as many "if else" statements as needed.

See for Yourself

Demo