I have a register form. I just need to load bootstrap form in same page behind the select menu when someone click something from select menu. Should I hide form until someone click that item in select menu right? 

**This is my code.**

```
<div class="form-group">
    <select class="form-control menu">
        <option>Select category*</option>
        <option>Apartment</option>
        <option>Lands</option>
    </select>
</div>

```

I need to load this form someone click **Apartment** in the menu.

```
<form>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Size(sqft)">
                        /div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="No of bedrooms">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="No of bathrooms">
                    </div>
                </div>
            </div>
        </div>
</form>

```

I tried play with this code. But it redirect to another pages.

```
<script>
   $('select.menu').change(function(e){
      // this function runs when a user selects an option from a <select> element
      window.location.href = $("select.menu option:selected").attr('value');
   });
</script>

```

What method do I need to follow?