show hidden div based on dropdown selection

Question

I have a Member Registration Form that contains a dropdown. It is for events so firstly they enter their membership details, select an event and then the number of tickets they wish to purchase. The options are as follows:

• Member
• Member + 1 Guest
• Member + 2 Guests
• Member + 3 Guests, and so on.

What I want to happen is that because "Members" are FREE to attend, I want to keep the payment div hidden unless they select Member + xxxx.

I am a complete novice when it comes to javascript/jquery but I can understand most of it when its written.

I have a JSfiddle (http://jsfiddle.net/bEuRh/) created with some basics but I need a hand writing the script. Some of the code is below:

<div id="tickets">
<label for="CAT_Custom_255276">Number of Tickets: <span class="req">*</span></label>
<select class="cat_dropdown" id="CAT_Custom_255276" name="CAT_Custom_255276">
    <option value=" ">-- Please select --</option>
    <option value="Member">Member</option>
    <option value="Member + 1 Guest">Member + 1 Guest</option>
    <option value="Member + 2 Guests">Member + 2 Guests</option>
    <option value="Member + 3 Guest">Member + 3 Guests</option>
</select>
</div>
<div id="payMethod">
<div class="header">
    PAYMENT METHOD
</div>
<div id="payOptions">
    <div id="payInfo">
        <div id="pay0" class="paymentinfo">
            <p>PAYMENT INFO OPTION 1</p>
        </div>
        <div id="pay1" class="paymentinfo">
            <p>PAYMENT INFO OPTION 2</p>
        </div>
        <div id="pay2" class="paymentinfo">
            <p>PAYMENT INFO OPTION 3</p>
        </div>
    </div>
</div>
</div>

If anyone could please assist, that would be greatly appreciated.

Answer 1

Here is a working example using pure JS:

//when a new option is selected...
document.getElementById('CAT_Custom_255276').addEventListener('change', function () {
    //hide all .paymentinfo
    Array.prototype.forEach.call(document.querySelectorAll('.paymentinfo'),  function (e) {
        e.style.display = 'none';
    });
    //get the selected index - 2 (first two do not impact display)
    var sel = +this.selectedIndex - 2;
    //if it is one of the last 3 selected...
    if (sel >= 0) {
        //display payMethod and the chosen individual options
        document.getElementById('payMethod').style.display = 'block';
        document.getElementById('pay' + sel).style.display = 'block';
    }
    else {
        //otherwise hide payMethod
        document.getElementById('payMethod').style.display = 'none';
    }
});

http://jsfiddle.net/bEuRh/4/

Answer 2

I like Raymond's approach of changing the HTML to:

    <option value="0">-- Please select --</option>
    <option value="1">Member</option>
    <option value="2">Member + 1 Guest</option>
    <option value="3">Member + 2 Guests</option>
    <option value="4">Member + 3 Guests</option>

Do that, and then use this jQuery to keep the payment div hidden unless they select the option for more than one member:

$('.cat_dropdown').change(function() {
    $('#payMethod').toggle($(this).val() >= 2);
});

I like this approach for several reasons:

1. it makes sense to give each option a value that corresponds to the meaning of the selection. For example, Member + 1 Guest has an associated value of 2.

2. it balances the code between the markup and the javascript in a meaningful, simpler way.

3. Instead of tons of javascript to worry about, you only have these three lines of jQuery to maintain.

Here's a jsfiddle to illustrate: http://jsfiddle.net/martco/3TvwV/4/