Question

我设计了一个页面，用于使用特定条件从数据库中过滤用户。现在这些标准是硬编码的 - 即名称，性别，设备类型，年龄组等。但我希望根据用户选择动态生成这些标准。（前用户不想名称但只有性别，因此名称甚至不应出现在页面上）。

此外，用户可能还需要一些其他条件，例如 location ，以便动态生成。这是代码的一部分。我必须使用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

您希望在Twitter-Bootstrap中完成吗？ Bootstrap并不意味着在您的网页中动态创建/插入元素。了解“动态”一词的背景非常重要。 Bootstrap的动态意味着您可以动态地使用值加载其组件。但它绝不是动态操纵dom，因为你想在这里完成它。

为此，您最好使用jQuery。 using-jquery-to-dynamically-create-div和how-to-create-divs-dynamically-in-jquery页面将指导您如何动态（且高效）将元素添加到要添加到的容器中。另一种方法是给你的 div class =“row”提供一个id（比如“optionsDiv”），然后按如下方式附加到它：

$('#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>');

在bootstrap </div>中动态生成<div>元素

1 个答案: