根据下拉选择显示表单字段的不同组合

Question

I'm creating a web form to allow societies to inquire about packages offered at a golf club. There are 7 different packages offered, each with a different combination of activities.

I want to set the form up so that when a package is selected from a drop down menu, the appropriate combination of fields are shown, as seen below. When the user has selected a package they then fill out the number of people attending each activity, a preferred time for each and their menu choices for each. This is the only part of the form that changes, details such as name, society name, email, further comments, etc. will always be shown.

I have attempted to put each field (i.e. morning coffee, lunch, etc.) into it's own table with an id tag eg. <table id="summerSaver">. These tables contained the appropriate input boxes (time, number of people, menu choice, etc.) I then gave a css rule to make sure they were all hidden to start with eg. #summerSaver{display:none;}. I then used javascript to change the css rule depending on what should be shown:

<script type='text/javascript'>
window.onload=function(){ 
    var select = document.getElementById("pack");
    select.onchange=function(){
        //Summer Saver
        if(select.value=="summerSaver"){
           document.getElementById("morningcoffee").style.display="inline";
           document.getElementById("bacon").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("morningcoffee").style.display="none";
           document.getElementById("bacon").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Full Round
        if(select.value=="fullRound"){
           document.getElementById("morningcoffee").style.display="inline";
           document.getElementById("lunch").style.display="inline";
           document.getElementById("dinner").style.display="inline";
           document.getElementById("dessert").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("morningcoffee").style.display="none";
           document.getElementById("lunch").style.display="none";
           document.getElementById("dinner").style.display="none";
           document.getElementById("dessert").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Early Starter
        if(select.value=="earlyStarter"){
           document.getElementById("morningcoffee").style.display="inline";
           document.getElementById("lunch").style.display="inline";
           document.getElementById("breakfast").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("morningcoffee").style.display="none";
           document.getElementById("lunch").style.display="none";
           document.getElementById("breakfast").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Light Lunch
        if(select.value=="lightLunch"){
           document.getElementById("morningcoffee").style.display="inline";
           document.getElementById("lunch").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("morningcoffee").style.display="none";
           document.getElementById("lunch").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Eighteen Holer
        if(select.value=="eighteenHoler"){
           document.getElementById("dinner").style.display="inline";
           document.getElementById("dessert").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("dinner").style.display="none";
           document.getElementById("dessert").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Good Value Day
        if(select.value=="valueDay"){
           document.getElementById("dinner").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("dinner").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Easy Round
        if(select.value=="easyRound"){
           document.getElementById("morningcoffee").style.display="inline";
        }else{
           document.getElementById("morningcoffee").style.display="none";
        }
    }
}
</script>

The problem I am having is that the correct tables aren't being shown. For example, Summer Saver shows only Bacon Sandwiches and The Full Round shows nothing at all. Upon further inspection the page only shows one table for each package, or none at all.

I'm a bit of a newbie when it comes to Javascript and JQuery so any assistance would be much appreciated.

Answer 1

I haven't looked too close at your code but this could be easily accomplished with jQuery:

http://jsfiddle.net/TSDb6/1/

This is the JS I used:

$(function(){
    var $table = $('#table');
    $('#package').on('change', function(){
        $table.find('tr').show().filter('.filter:not(.package_'+this.value+')').hide()
    }).trigger('change');
});

All rows have classes that define when they should be shown. This reduces the necessary js and makes it easier to change or add new packages.

Whenever the dropdown value changes it shows all table rows and hides the ones that should be filtered according to packages (.filtered) that don't have the corresponding package_x class.