Efficiently Shorten - using jquery

I need to see if I can shorten this AND see if I can have a “show all option” added.

The page is setup like so…
I have the following javascript working… I’m running jquery… being a semi newbie it took a while to get this running.

I have 4 DISTINCT queries that load up select boxes.

There are 4 select boxes … on change, the queries will see what option was selected and re-run DISTINCT SQL queries so all the select boxes only have related info… so no one ends up with a “zero” results.

I’m hiding these to help walk through in a logical order. However I need to

  1. Have a show all and let them select anything they wish and show all 4 boxes. How can I add a “show all” to the script below
  2. I noticed on page load the boxes show and then slowly hide. THis looks messy… how can I alter that?
  3. This seems long for what I’m doing… is there a way I can shorten this code? What if I expand to 8 boxes… then I’ll have 8 simple if statements… but it seems unnecessary.

CODE that is working is

$(document).ready(function () {
if ($(“#pMaterial option”).is(“:selected”))
{
//show the hidden div
$(“#pPoint”).show(“fast”);
}
else
{
//otherwise, hide it
$(“#pPoint”).hide(“fast”);
}

   if ($("#pPoint option").is(":selected"))
    {
        //show the hidden div
        $("#pLength").show("fast");
    }
    else
    {      
        //otherwise, hide it 
        $("#pLength").hide("fast");
    }
	if ($("#pLength option").is(":selected"))
    {
        //show the hidden div
        $("#pThread").show("fast");
    }
    else
    {      
        //otherwise, hide it 
        $("#pThread").hide();
    }
	if ($("#pThread option").is(":selected"))
    {
        //show the hidden div
        $("#pDiameter").show("fast");
    }
    else
    {      
        //otherwise, hide it 
        $("#pDiameter").hide();
    }
	if ($("#pDiameter option").is(":selected"))
    {
        //show the hidden div
        $("#pFinish").show("fast");
    }
    else
    {      
        //otherwise, hide it 
        $("#pFinish").hide();
    }

});

The boxes are wrapped in divs like so
<div id=“pMaterial” style=“width:150px;float:left;”>select box here</div>
<div id=“pPoint” style=“width:150px;float:left;”>select box here</div>

Any help is greatly appreciated

You could probably shorten it to be about this short

$(function() {
    var each = ['#pMaterial', '#pPoint', '#pLength', '#pThread', '#pDiameter'];
    var mtch = ['#pPoint', '#pLength', '#pThread', '#pDiameter', '#pFinish'];
    
    $.each(each, function(i) {
        if ($('option', this).is(':selected')) {
            $(mtch[i]).show('fast');
        } else {
            $(mtch[i]).hide('fast');
        }
    });
    
    $('#show-all').click(function(e) {
        e.preventDefault();
        
        $.each(mtch, function() {
            $(this).show('fast');
        });
    });
});
  1. Have a show all and let them select anything they wish and show all 4 boxes. How can I add a “show all” to the script below
    In the above code i added an event handler for a click event, simply create an anchor element in your page like the below example.
<a href="#" id="show-all">Show all</a>
  1. I noticed on page load the boxes show and then slowly hide. THis looks messy… how can I alter that?
    Is there a live demo where i can see this as its hard to debug just by the code.
  1. This seems long for what I’m doing… is there a way I can shorten this code? What if I expand to 8 boxes… then I’ll have 8 simple if statements… but it seems unnecessary.

Shortened code above, if you need an explanation to how it works let me know but its pretty much straight forward.