Question

Let me set up the situation:

I have a form. This form has several fields which are dependent upon a single drop-down, lets call it Art Kind. Based on the value of this Art Kind, several other fields are to be hidden/shown. Multiple values within this Art Kind dropdown can trigger the same set of fields being shown. For example.

User selects "Awesome", or "Cool", from the Art Kind dropdown:
     - URL and Name fields are shown

User selects "Rainbow", or "Double Rainbow", from the Art Kind dropdown:
    - URL and Name fields are hidden
    - Color and Size fields are shown

I think you get the idea.

I’m trying to come up with a better solution than something like this:

if (selected == "Awesome" || selected == "Cool")
{
    url.show();
    name.show();
}

Because there are a ton of fields, and a ton of different options that need be shown/hidden depending on selection. I’ve dabbled in an array, but I’m lost on how to get what I need accomplished.

I was thinking about storing the options in a multidimensional array, or an object, something like:

var values = [
     ['Awesome', 'Cool'], ['url', 'name']
]

But I’m not sure how to implement such a thing.

Any ideas? I’m open to answers that involve jQuery for simplification, but I’d rather keep other libraries out of it.

Answer 1

A similar idea to @Pointy’s, somewhat different execution.

function hideAllFormElements()
{
    // snip...
}

function showElements(ids)
{
    for (var i=0; i<ids.length; i++)
    {
        document.getElementById(ids[i]).style.display = 'none';
    }
}

var mapping = {
    Awesome: ['url', 'name'],
    Cool: ['url', 'name'],
    Rainbow: ['color', 'size'],
    'Double Rainbow': ['color', 'size']
};

// later...
hideAllFormElements();
showElements(mapping[selected]);

---

Edit

Because jQuery is the bee’s knees, instead of separate hide/show functions this will suffice, given just var mapping = {...} as above:

$('#mySelect').change(function ()
{
    var selected = $(this).val();
    
    $('#myForm :input').hide();
    $.each(mapping[selected], function ()
    {
        $('#' + this).show();
    });

    // or if you want to get really fancy,
    $($.map(mapping[selected], function ()
    {
        return '#' + this;
    }).get().join(', ')).show();
});