CODEWITHSUNDEEP
jquery
Precious George
Precious George

Reputation: 105

Jquery, hide/show on select option

I am trying to use select option to display a <*div>'s that have checkboxes in them but its not working.

here is my script below

jquery

   $(document).ready(function() {
       $(".feeschedule1").hide();
       $(".feeschedule2").hide();
       $("#select").change(function(){
           var feeschedule1 = $(".feeschdule1");
           var feeschedule2 = $(".feeschdule2");
           var select = $("#select").val();

        if (select == $("#nd1f")){

            feeschedule1.show();
        }
        }else{

            feeschedule1.hide();
        }
        if (select == $("#nd2f")){

            feeschedule2.show();
        }
        }else{
            feeschedule2.hide();

        })


    });

HTML

<form action="" method="">
    <select id="select">
        <option id="nd1f" value="nd1fulltime">ND1 FULL TIME</option>
        <option id="nd2f" value="nd2fulltime">ND2 FULL TIME</option>
    </select>
    <div class="feeschedule1">
        <tr>
            <td><label for="schoolfees">SCHOOL FEES ND1 FULL TIME</label></td>
            <td><input type="checkbox" value="15000" ></td>
        </tr>
    </div>
    <div class="feeschedule2">
        <tr >
            <td ><label for="schoolfees">SCHOOL FEES ND2 FULL TIME</label></td>
            <td><input type="checkbox" value="15000" ></td>
        </tr>
    </div>
</form>

It hides the <*div> quite alright but it does not show them when a selection is made. Is there anything i am not doing right?

Upvotes: 0

Views: 4443

Answers (3)

jackcogdill
jackcogdill

Reputation: 5122

There is probably a more dynamic way you can be doing this.
I see you have a lot of repetitive code such as:

if (select == $("#nd2f")){

You dont want to use repetitive if statements. A better way might be to use:

<select class="select" onchange="javascript:myfunction(this.value)">

Then your dynamic javascript:

options = [ 'nd1fulltime', 'nd2fulltime' ];
schedules = [ '.feeschedule1', '.feeschedule2' ];

function myfunction(choice) {
    for (i in options) {
        if (choice == options[i]) {
            $(schedules[i]).show();
        }
        else {
            $(schedules[i]).hide();
        }
    }
}

Upvotes: 1

Hari krishnan
Hari krishnan

Reputation: 2108

Try this:

        if (select == "nd1fulltime"){

         feeschedule1.show();
        }else{
        feeschedule1.hide();
        }
        if (select == "nd2fulltime"){

        feeschedule2.show();
        }else{
        feeschedule2.hide();


        });

By if (select == $("#nd1f")) you are comparing with an element.What you need to is compare the value of the element.

Not $("#nd1f") its value should be matched...

Upvotes: 0

soyuka
soyuka

Reputation: 9105

First thing I noticed within your code :

 if (select == $("#nd1f"))

Your trying to compare a val to an element, it'll not match.

Than see the if/else :

if (select == $("#nd1f")){

    feeschedule1.show();
} // This is wrong !
}else{

    feeschedule1.hide();
}

You had many errors in your code, see it corrected in this fiddle.

To catche the selected option value you'll have to do something like that : 

   var select = $(this).find('option:checked').val();

You writed :

var feeschedule1 = $("feeschdule1");

it should be

var $feeschedule1 = $(".feeschedule1");

Last things were that the change function brackets where not properly closed. When you code, be careful with the indentation and it'll limit errors like these.

Upvotes: 1

Related Questions