根据带有类标记的下拉菜单选择隐藏/显示表单字段

Question

I have a problem with the show/hide function on an app form. The app form is live here -> http://www.specialfinance.co.uk/introducers/submit-an-enquiry/secured-loans.html

Currently the form works as a multipage form (within javascript) which is fine, it's doing the job nicely, but what I can't figure out based on any of the Q&A guides I've looked thru on here (I've gone thru many google searches) is how to integrate a further show/hide script to hide the applicant 2 column if the dropdown at the top has a value of 1.

The column is a table with all the inputs in separate rows, so I was thinking that the easiest way would be to link to a class and then hide the class, but I have no idea how to do this.

I'm getting there with my knowledge of javascript, but this one seems to be a hurdle I can't get over.

Answer 1

You can use the .change() (jQuery) with the dropdown list to see what the value is, then based off that, hide and show what you need.

$("#idOfDropDown").change(function() {
    if ($(this).val() == 1) {
        //Show  or Hide what you need .show()
    }
    else {
        //Show or Hide .hide()
});

Heres a demo: http://jsfiddle.net/Szt59/1/ using a class.

Answer 2

Here is a quick and dirty example. It's easy to see how you can extend it.

$("#drop").change(function(){
    if( $(this).val() === "2" ) {
         $(".rest").slideDown("fast");   
    } else {
       $(".rest").slideUp("fast");     
   }
});

Click to see demo Edited.