CODEWITHSUNDEEP
jqueryselecthidehtml-select
TopDollarUK
TopDollarUK

Reputation: 47

Jquery + Select + Hide Div Based on Selected index value

I'm an intermediate designer/developer stuck on a simple problem which I can't figure out.

Maybe it's just me working for almost 8 hours straight now, but if anyone can help I would appreciate it ever so much.

In short, I have 3 dropdowns:

  1. no of children.
  2. baby seats.
  3. booster seats.

Now by default, only the first dropdown shows (no of children). The other two are hidden by default in css. What I'm trying to do here is, IF the value of (no of children) dropdown is NOT zero then show the other two dropdowns that are encapsulated in DIVs by jquery.

This is my XHTML code thus far, no error, but nothing happens either:

    <div class="title">No of Children:</div>
    <div class="info">
      <select name="children" id="no_of_children">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>

    <div class="title" id="baby">Baby Seats?:</div>
    <div class="info">
      <select name="babyseats" id="baby_seats">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>

    <div class="title" id="booster">Booster seats?:</div>
    <div class="info">
      <select name="boosterseats" id="booster_seats">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>

This is my jquery:

    <script type="text/javascript">  
      $('#no_of_children').bind('change', function(event) {

      var x = $('#no_of_children').val();         
 if( x == "0" ) {             
    $('#booster').hide();
    $('#baby').hide();      
 }         
      });
    </script>

Nothing happens. Please help.

Upvotes: 0

Views: 2212

Answers (5)

Dave Thomas
Dave Thomas

Reputation: 3837

make sure your jQuery is contained inside of 

$(function () {

    //YOUR CODE HERE
});

Running your code as is will not initialize the change event

Upvotes: 0

msponagle
msponagle

Reputation: 326

Currently Working on a fiddle for you.

http://jsfiddle.net/G7wdT/1

Would be nice to encapsulate the entire select in a common Div.

You need to Show the divs when the value is not 0, in an Else statement of your current JS.

Here is the code:

 <div class="title">No of Children:</div>
<div class="info">
  <select name="children" id="no_of_children">
    <option value="0" selected>0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

<div class="title" id="baby">Baby Seats?:
    <div class="info">
      <select name="babyseats" id="baby_seats">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
</div>

<div class="title" id="booster">Booster seats?:
   <div class="info">
      <select name="boosterseats" id="booster_seats">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
</div>

And the js

$('#no_of_children').bind('change', function(event) {

var x = $('#no_of_children').val();

if (x == "0") {
    $('#booster').hide();
    $('#baby').hide();
}else{
    $('#booster').show();
    $('#baby').show();
}

});​

Upvotes: 3

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15876

 <script type="text/javascript">
    $(document).ready(function () {
        $('#no_of_children').bind('change', function (event) {

            var x = $('#no_of_children').val();
            if (x == "0") {
                $('#booster').hide();
                $('#baby').hide();
            } else {
                $('#booster').show();
                $('#baby').show();
            }
        });
    });


<div class="title">
    No of Children:</div>
<div class="info">
    <select name="children" id="no_of_children">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>
<div class="title" id="baby" style="display: none;">
    Baby Seats?:
    <div class="info">
        <select name="babyseats" id="baby_seats">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
</div>
<div class="title" id="booster" style="display: none;">
    Booster seats?:
    <div class="info">
        <select name="boosterseats" id="booster_seats">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
</div>

</script>

Upvotes: 0

charlietfl
charlietfl

Reputation: 171698

You have a simple typo in selector for $('#baby')...missing closing quote

Code works otherwise, although not sure it is effect you want

http://jsfiddle.net/YbKSk/1/

Upvotes: 0

Seabass
Seabass

Reputation: 1983

The #booster and #baby elements you are hiding only contain the title.

Try revising your HTML like so. They JavaScript should work as is.

<div id="baby">
  <div class="title">Baby Seats?:</div>
  <div class="info">
    <select name="babyseats" id="baby_seats">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
</div>

<div id="booster">
  <div class="title">Booster seats?:</div>
  <div class="info">
    <select name="boosterseats" id="booster_seats">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
</div>

Upvotes: 0

Related Questions