dynamically generate elements in bootstrap

Question

I have designed a page that is used to filter users from the database using a particular criteria. Right now those criteria are hardcoded - namely name, gender, device type, age group etc. but I want these criteria to be generated dynamically according to the users choice. (ex user doesn't want name but only gender, so name should not even appears on the page).

Also users might want some other criteria such as location so that should be generated dynamically. Here is the part of the code. Will i have to use salvattore?

<div class="col-md-12 well well-sm" role="main">
            <fieldset>
                <legend>Search criteria to select message recipients</legend>
                <form:form method="get" action="search.do" id="searchForm" >
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="input-group col-xs-10">
                                <span class="input-group-addon"><span class="glyphicon glyphicon- user"></span></span>
                                <input type="text" name="userName" class="form-control" placeholder="Username">
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="input-group col-xs-10">
                                <select name="gender" class="form-control col-xs-4">
                                     <option value="">Select Gender</option>
                                    <option value="M">Male</option>
                                    <option value="F">Female</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="input-group col-xs-10">
                                <select id="deviceType" name="deviceType" class="form-control">
                                    <option value="">Device Type</option>
                                    <option value="Android">Android</option>
                                    <option value="Apple">Apple</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="input-group col-xs-10">
                                <select name="ageGroup" class="form-control">
                                    <option value="">Age group</option>
                                    <option value="10">Younger than 10 Years</option>
                                    <option value="10-20">10-20 Years</option>
                                    <option value="20-40">20-40 Years</option>
                                    <option value="40-60">40-60 Years</option>
                                    <option value="60">Elder than 60 Years</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="input-group col-xs-10">
                                <select name="interest" class="form-control">
                                    <option value="">Interest In</option>
                                    <option value="News">News</option>
                                    <option value="Sports">Sports</option>
                                    <option value="Music">Music</option>
                                    <option value="Politics">Politics</option>
                                    <option value="Education">Education</option>
                                </select>
                            </div>
                        </div>
                    </div>

Answer 1

You want it to be done in Twitter-Bootstrap? Bootstrap is not meant to create/insert elements dynamically in your web page. It's important to know the context of word "dynamic". Bootstrap's dynamic means you can load its components with values dynamically. But it was never meant to manipulate dom dynamically, as you want to have it done here.

For that, you better use jQuery. using-jquery-to-dynamically-create-div and how-to-create-divs-dynamically-in-jquery page will guide you how to dynamically (and efficiently) add element to the container you want to add to. Another way is to give an id (say "optionsDiv") to your containing div class="row" and then append to it as follows:

$('#optionsDiv').append('<div class="col-xs-3">' +
             '<div class="input-group col-xs-10">' +
             '<span class="input-group-addon">' +
             '<span class="glyphicon glyphicon- user"></span>' +
             '</span>' +
             '<input type="text" name="userName" class="form-control" placeholder="Username">' +
             '</div>' +
             '</div>');