Question

Yesterday I have raised the same type of question in a different format. But today i want the same question in a different format.

Here it goes:

I have multiple divs in a page.

When i select one value from the drop down and I click the submit button, I need to show the two divs.

Here is my html code :

 <div id="one">
                  <h1>
                    Security
                      <div class="hdrhr" style="width:5%">&nbsp;</div>
                  </h1>
             </div>
             <div id="two"  class="hidden">
                  <h1>
                    Customer Type
                      <div class="hdrhr" style="width:5%">&nbsp;</div>
                  </h1>
             </div>


<form onSubmit="javascript: return false;">
                                    <select name='dropDown' id='dropDown' style="width:205px;padding:4px;margin-left:-2px;">
                                        <option value="one">Security</option>
                                        <option value="two">Customer Type</option>
</select>

Here is the button
Get Details

 <div id="one" class="roundedCorner">
                        <table width="100%" border="0" cellpadding="8" cellspacing="0">
                            <tr>
                            <td align="center" class="parentalhdtlnt" style="color:#ffffff;width:5%">
                               Id_User
                               <br />
                               <input type="text" name="Member" class="ipttxt" tabindex="1" />
                            </td>
</tr>
</table>
</div>
 <div id="two" class="roundedCorner">
                        <table width="100%" border="0" cellpadding="8" cellspacing="0">
                            <tr>
                            <td align="center" class="parentalhdtlnt" style="color:#ffffff;width:5%">
                               Id_User
                               <br />
                               <input type="text" name="Member" class="ipttxt" tabindex="1" />
                            </td>
</tr>
</table>
</div>

Here is my js code

 <script type="text/javascript">
    $(document).ready(function(){
        $("#goBttn").click(function(){
            $("#"+$("#dropDown").val()).show();
            select = document.getElementById("dropDown").getElementsByTagName("option");
            select = document.getElementById("hdrlbl").getElementsByTagName("option");
            for(x=0;x<=select.length;x++)
                if($(select[x]).val()!=$("#dropDown").val()) $("#"+$(select[x]).val()).hide();
                if($(select[x]).val()!=$("#hdrlbl").val()) $("#"+$(select[x]).val()).hide();
        });
    });
</script>

In a drop down if i selecting security i need to show the heading div and as well as content div the same for customer type

Kindly bear me the formatting of the code.

Please help me.

Thanks in advance
SKM

Answer 1

I spent some time restructuring the code as a whole since it looks a bit unorganized to me. Here is the JSFiddle: http://jsfiddle.net/ccw24/

HTML

<div class="headerCont switchArea">
    <div data-ref="one">Header One (Security)</div>
    <div data-ref="two">Header Two (Customer Type)</div>
</div>

<select name='dropDown' id='dropDown'>
    <option value="one">Security</option>
    <option value="two">Customer Type</option>
</select>
<a href='#' id="pageChange">Go</a>

<div class="footerCont switchArea">
    <div data-ref="one">Footer One (Security)</div>
    <div data-ref="two">Footer Two (Customer Type)</div>    
</div>

JS

$(document).ready(function(){
    $("#pageChange").on('click',function(e){
        e.preventDefault();
        var ref = $('#dropDown').val();
        $('.switchArea > div').hide();
        $('div[data-ref="'+ref+'"]').show();
    });
});

CSS

.switchArea > div {
    display: none
}

.switchArea > div:first-of-type {
    display: block
}

Just a note: This code uses some more modern techniques that may not work well with older browsers (Old IE, I am looking at you) so if you need compatibility with those browsers then you may need to do some tweaking.