Bootstrap Snippet Rule builder using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <h3>Add a rule</h3>
    <div class="row">
        <!--<div class="form-group form-group-options col-xs-11 col-sm-8 col-md-4">-->
        <div class="form-group form-group-options">
            <div class="input-group input-group-option">
                 <select class="form-control" name="values[]">
                    <option value="">Select one</option>
                    <option value="1">Genre</option>
                    <option value="2">Age range</option>
                    <option value="3">Subscription tier</option>
                    <option value="4">Retail model</option>
                </select>             
                <input type="text" name="option[]" class="form-control" placeholder="Type something">
                <span class="input-group-addon input-group-addon-remove">
                    <span class="glyphicon glyphicon-remove"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<!--
<div class="container">
    <h3>Some other kind of rule</h3>
    <div class="row">
        <div class="form-group form-group-multiple-selects col-xs-11 col-sm-8 col-md-4">
            <div class="input-group input-group-multiple-select col-xs-12">
                <select class="form-control" name="values[]">
                    <option value="">Select one</option>
                    <option value="1">Option 1</option>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 
    Text fields 
*/
div.input-group-option:last-child span.input-group-addon-remove{
    display: none;
}
div.input-group-option:last-child input.form-control{
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
div.input-group-option span.input-group-addon-remove{
    cursor: pointer;
}
div.input-group-option{
    margin-bottom: 10px;
}
/* 
    Selects 
*/
div.input-group-multiple-select:last-child span.input-group-addon-remove{
    display: none;
}
div.input-group-multiple-select:last-child input.form-control{
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
div.input-group-multiple-select span.input-group-addon-remove{
    cursor: pointer;
    background: none;
    border: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 
    Text fields 
*/
$(function(){
    $(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function(){
        var sInputGroupHtml = $(this).parent().html();
        var sInputGroupClasses = $(this).parent().attr('class');
        $(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');
    });
    
    $(document).on('click', 'div.form-group-options .input-group-addon-remove', function(){
        $(this).parent().remove();
    });
});
/* 
    Selects 
*/
$(function(){
        
    var values = new Array();
    
    $(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:last-child select', function(){
        
        var selectsLength = $('.form-group-multiple-selects .input-group-multiple-select select').length;
        var optionsLength = ($(this).find('option').length)-1;
        
        if(selectsLength < optionsLength){
            var sInputGroupHtml = $(this).parent().html();
            var sInputGroupClasses = $(this).parent().attr('class');
            $(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');  
        }
        
        updateValues();
        
    });
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Rule builder"
Bootstrap 3.2.0 Snippet by daleitch

Related: See More

Questions / Comments:

"Rule builder" Bootstrap 3.2.0 Snippet by daleitch

Related: See More

Questions / Comments:

"Rule builder"
Bootstrap 3.2.0 Snippet by daleitch