<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"> <div class="input-group input-group-optionp col-xs-12"> <input type="text" name="optionp[]" class="form-control" placeholder="Focus me"> <!--span class="input-group-addon input-group-addon-remove"> <span class="glyphicon glyphicon-remove"></span> </span--> </div> </div> </div> </div>

/* 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; } div.input-group-multiple-select{ margin-bottom: 5px; }

/* 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()); }); $(document).on('change', '.form-group-multiple-selectsp .input-group-multiple-selectp:not(:last-child) select', function(){ updateValues($(this).parent().parent()); }); $(document).on('click', '.input-group-addon-remove', function(){ var oSelectContainer = $(this).parent().parent() $(this).parent().remove(); //odortega@gmail.com 2017/01/19 var textfield = $('div.form-group-optionsp div.input-group-optionp:last-child input'); textfield.parent().remove(); //FIN odortega@gmail.com 2017/01/19 updateValues(oSelectContainer); }); function updateValues(oSelectContainer){ values = new Array(); $(oSelectContainer).find('.input-group-multiple-selectp select').each(function(){ var value = $(this).val(); if(value != 0 && value != ""){ values.push(value); } }); $(oSelectContainer).find('.input-group-multiple-selectp select').find('option').each(function(){ var optionValue = $(this).val(); var selectValue = $(this).parent().val(); if(in_array(optionValue,values)!= -1 && selectValue != optionValue) { $(this).attr('disabled', 'disabled'); } else { $(this).removeAttr('disabled'); } }); } function in_array(needle, haystack){ var found = 0; for (var i=0, length=haystack.length;i<length;i++) { if (haystack[i] == needle) return i; found++; } return -1; } // Update all options for first use $('.form-group-multiple-selectsp').each(function(i, e){ updateValues(e); }); });