show selected div with radio,dropdown, and button

Question

a have a page that consist of:

<input type="radio" id="oqcline" class="section"/>OQC Line
<input type="radio" id="oqcbalance" class="section"/>Balance

<br/><br/>
Month
<select id="search_month" class="searchqp" name="search_month">
Year
<select id="search_year" class="searchqp" name="search_year">
<button id="search" type="button" class="ui-state-default ui-corner-all"><span>Search </span></button>

and i have two divs for show data:

<div id="data">
<div id="list">

i want like:

if click "oqcline"-> select month and year ->click search->"data" can show,"list" hidden
if click "balanceline" -> select month and year ->click search->"list" can show,"data" hidden

can you show me how to do that?

Answer 1

Well, first of all you'll want to clean up your HTML - use the label tag for labels, and give the radio button input elements a name so that they'll be grouped together.

<form id="ocq">
    <input type="radio" name="section" id="oqcline" class="section" value="line" />
    <label for="oqcline">OQC Line</label>
    <input type="radio" name="section" id="oqcbalance" class="section" value="balance" />
    <label for="oqcbalance">Balance</label>

    <label for="search_month">Month</label>
    <select id="search_month" class="searchqp" name="search_month">
        <option>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
    </select>
    <label for="search_year">Month</label>
    <select id="search_year" class="searchqp" name="search_year">
        <option>1994</option>
        <option>1995</option>
        <option>1996</option>
        <option>1997</option>
        <option>1998</option>
    </select>

    <button id="search" class="ui-state-default ui-corner-all">Search</button>
</form>

<div id="data">Data</div>
<div id="list">List</div>

We're also wrapping the whole thing in a form because that's what it is - a search form. Now, a simple CSS rule to hide the two div. You might want to use Javascript to do the hiding instead if you need them to show for users without Javascript.

#data, #list {
    display: none;
}

Finally, the jQuery. This checks for the submission of the form and cancels the default browser action, before showing/hiding the correct div according to which of the radio button is selected

var data = $('#data'),
    list = $('#list');

$('#ocq').submit(function(){
    var value = $(':radio[name="section"]:checked').val();
    if(value  === 'line'){
        data.show();
        list.hide();
    } else if(value  === 'balance') {
        list.show();
        data.hide();
    }

    return false;
});

Have a look at the live demo: http://jsfiddle.net/yijiang/rEtxM/1