CODEWITHSUNDEEP
jqueryformsdrop-down-menu
user1371519
user1371519

Reputation: 39

How to show/hide 2 different divs depending on select list value chosen?

I'm very new to jquery and have searched around quite a bit. I would like to show div(free1a) if a value of 6, 7, 8, or 9 is chosen. And show div(free2a) if any other value is chosen from the select list. With my html below if any class="show1" is chosen display div id="free1a". If any class="show2" is chosen display div id="free2a".

Thanks in advance for anyone's input

HTML:

<select name="quantity" id="community" class="store-qty" data-inline="true">
      <option value="">Select</option>
      <option class="show1" value="6">6</option>
      <option class="show1" value="7">7</option>
      <option class="show1" value="8">8</option>
      <option class="show1" value="9">9</option>
      <option class="show2" value="10">10</option>
      <option class="show2" value="11">11</option>
      <option class="show2" value="12">12</option>
      <option class="show2" value="13">13</option>
      <option class="show2" value="14">14</option>
      <option class="show2" value="15">15</option>
      <option class="show2" value="16">16</option>
      <option class="show2" value="17">17</option>
      <option class="show2" value="18">18</option>
      <option class="show2" value="19">19</option>
      <option class="show2" value="20">20</option>
    </select>

<div id="free1a">Stuff in here...</div>

<div id="free2a">Other stuff in here...</div>

Javascript:

$("#free1a").hide();
$("#free2a").hide();
$("#community").change(function(){
   $("#free1a").show($(this).class()==".show1");
}).change();
$("#community").change(function(){
   $("#free2a").show($(this).class()==".show2");
}).change();

Upvotes: 1

Views: 3265

Answers (4)

Lejo
Lejo

Reputation: 1011

you can set little object like

        $(document).ready(function(){
        var free1a = {'value6':true, 'value7':true, 'value8':true, 'value9':true};
        $("#free1a").hide();
        $("#free2a").hide();

        $('#community').change(function(){

            $("#free1a").hide();
            $("#free2a").hide();

            if(free1a['value'+$(this).attr('value')])
                $("#free1a").fadeIn();
            else
                $("#free2a").fadeIn();
        });
    });

Upvotes: 0

Willy
Willy

Reputation: 1838

$("#community").change(function(){
    var tmp = $(this).find("option:selected");
    if (!tmp.is('.show1,.show2')){
        $("#free1a,#free2a").hide();
        return;
    }
    var isFree1a = tmp.hasClass("show1");
    $("#free1a").toggle(isFree1a);         
    $("#free2a").toggle(!isFree1a);         
}).change();

Upvotes: 0

rkw
rkw

Reputation: 7297

You tagged your html very well.

http://jsfiddle.net/8C8cP/1/

$(function() {
    $('#community').change(function() {
        var option = $(this).find('option:selected');
        $('#free1a').toggle(option.hasClass('show1'));
        $('#free2a').toggle(option.hasClass('show2'));
    }).change();
});​

The only confusing part would be the .change() at the end. That is there to trigger the event when the page first enters.

Upvotes: 2

Chase
Chase

Reputation: 29549

I took your example above and created what I believe you're asking for. I removed the javascript include src, so be sure you include that back in when testing. I used http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Hope it helps!

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script src="" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#free1a").hide();
    $("#free2a").hide();

    $("#community").change(function(){

        if(this.value == 6 || this.value == 7 || this.value == 8 || this.value == 9){
            $("#free2a").hide();
            $("#free1a").show();
        }
        else if(this.value == 10 || this.value == 11 || this.value == 12 || this.value == 13){
            $("#free1a").hide();
            $("#free2a").show();
        }
        else{
            $("#free1a").hide();
            $("#free2a").hide();
        }

    }).change();
    $("#community").change(function(){

    }).change();
});

</script>
</head>
<body>
<select name="quantity" id="community" class="store-qty" data-inline="true">
      <option value="">Select</option>
      <option class="show1" value="6">6</option>
      <option class="show1" value="7">7</option>
      <option class="show1" value="8">8</option>
      <option class="show1" value="9">9</option>
      <option class="show2" value="10">10</option>
      <option class="show2" value="11">11</option>
      <option class="show2" value="12">12</option>
      <option class="show2" value="13">13</option>
      <option class="show2" value="14">14</option>
      <option class="show2" value="15">15</option>
      <option class="show2" value="16">16</option>
      <option class="show2" value="17">17</option>
      <option class="show2" value="18">18</option>
      <option class="show2" value="19">19</option>
      <option class="show2" value="20">20</option>
    </select>

<div id="free1a">Stuff in here...</div>

<div id="free2a">Other stuff in here...</div>
</body>
</html>

Upvotes: 0

Related Questions