Using a dynamic form select with a jquery

Question

Good day,

I woud like to appologize - I'm new to jQuery and trying to build a form wich will show additional fields depending on user select.

Right now I have a form with lots of steps and want to make it on one page. So idea is the following:

The first form on a site is:

         <label for="form1">Form1</label>
         <select name="select1" id="select1">
             <option value="airport">Airport</option>
             <option value="railway">Railway station</option>
             <option value="address">Address</option>
         </select>

What I whant to do is when a person make a selection another fields will apear, like:

1. If option airport is selected, it should show the select field as:

     <select name="select1" id="select1">
         <option value="airport1">Airport1</option>
         <option value="airport2">Airport2</option>
         <option value="airport3">Airport3</option>
     </select>
   

2. If option railway is selected, same as for airport.

3. If option address is selected, it should bring up an input text field:

    <input name="sometext" type="text" size="30" maxlength="255">
   

Any ideas? I've looked everywhere for a tutorial.

Answer 1

Listen for change event and check selected value

$('#checkboxId').change(function(){//some actions})

Here is fiddle.http://jsfiddle.net/Goodluck/NS24G/

Answer 2

I give just an example when you click airports, take a look on this DEMO.

Essentially, you have to bind click event on "select" and then check what kind of element has been selected:

$('#select1').on('click', function() {
    var category = $(this).val();
    if(category === 'airport') {
        $('#select2, #airports').fadeIn(200); 
    }
});

• Here full example.