根据下拉选择显示隐藏的div

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/

Answer 3

http://jsfiddle.net/bEuRh/5/

I'll get the value when select change is detected and compare..

EDIT:

$("select").change(function () {
    var str = "";
    str = parseInt($(this).val());

    $("#payMethod").toggle(str >= 2)
});

In HTML, i changed the value to integer...

        <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>

if you wanna show individual div... you can try this one..

http://jsfiddle.net/bEuRh/6/

Answer 4

It's better to attache events in script instead of onchange in html but then I'd have to add a lot of JS code just to make it browser compatible:

<script type="text/javascript">
function showInfo(){
    var divs=document.querySelectorAll(".paymentinfo"),
    i,
    // next line assumes only one element with this style
    select=document.querySelectorAll(".cat_dropdown")[0], 
    index;
    for(i=0;i<divs.length;i++){
        divs[i].style.display="none";
    }
    //get the index of the select
    index=select.selectedIndex-2;
    if(index>-1){
        divs[index].style.display="block";
        document.getElementById('payMethod').style.display = 'block';
        return
    }
    document.getElementById('payMethod').style.display = 'none';
}
</script>

<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" onchange="showInfo();">
    <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" style="display:none">
<div class="header">
    PAYMENT METHOD
</div>
<div id="payOptions">
    <div id="payInfo">
        <div id="pay0" class="paymentinfo" style="display:none">
            <p>PAYMENT INFO OPTION 1</p>
        </div>
        <div id="pay1" class="paymentinfo" style="display:none">
            <p>PAYMENT INFO OPTION 2</p>
        </div>
        <div id="pay2" class="paymentinfo" style="display:none">
            <p>PAYMENT INFO OPTION 3</p>
        </div>
    </div>
</div>
</div>