"select add text field"
Bootstrap 3.3.0 Snippet by odortega

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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>Selects</h3>
<div class="row">
<div class="form-group form-group-multiple-selectsp col-xs-11 col-sm-8 col-md-4">
<div class="input-group input-group-multiple-selectp col-xs-8">
<select class="form-control" name="values[]">
<option value="">Select one</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<span class="input-group-addon input-group-addon-remove">
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<div class="container">
<h3>Fields</h3>
<div class="row">
<div class="form-group form-group-optionsp col-xs-11 col-sm-8 col-md-4">
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: 3px;
}
/*
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
/*
Selects
*/
$(function(){
var values = new Array();
//$(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:last-child select', function(){
$(document).on('click', '.addButton', function(){
var selecField = $('.form-group-multiple-selectsp .input-group-multiple-selectp:last-child select');
var selectsLength =selecField.parent().parent().find('.input-group-multiple-selectp select').length;
var optionsLength = (selecField.find('optionp').length)-1;
if(selectsLength < optionsLength){
var sInputGroupHtml = selecField.parent().html();
var sInputGroupClasses = selecField.parent().attr('class');
selecField.parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');
//odortega@gmail.com 2017/01/19
var textfield = $('div.form-group-optionsp div.input-group-optionp:last-child input');
var sInputGroupHtml = textfield.parent().html();
var sInputGroupClasses = textfield.parent().attr('class');
textfield.parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');
//FIN odortega@gmail.com 2017/01/19
}
updateValues($(this).parent().parent());
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: