<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>Fields</h3>
<div class="row">
<div class="form-group form-group-options col-xs-11 col-sm-8 col-md-4">
<div class="input-group input-group-option col-xs-12">
<input type="text" name="option[]" 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>
<div class="testclass" id="testclass">
<input type="text" name="homedir" class="form-control" placeholder="Home Dir">
</div>
<div class="container">
<h3>Selects</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>
<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>
</div>
<div class="two-options" id="two-options">
<div class="container">
<h3>Two Options</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="two-options">
<option value="">Select one</option>
<option value="1">Create</option>
<option value="2">Delete</option>
</select>
<span class="input-group-addon input-group-addon-remove">
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="enable-disable" id="enable-disable">
<div class="container">
<h3>Enable-Disable</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="two-options">
<option value="">Select one</option>
<option value="1">Enable</option>
<option value="2">Disable</option>
</select>
<span class="input-group-addon input-group-addon-remove">
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</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;
}
/*
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(){
$('.testclass').css("display", "none");
$('.two-options').css("display", "none");
$('.enable-disable').css("display", "none");
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){
$('.two-options').hide();
$('.enable-disable').hide();
var sInputGroupHtml = $(this).parent().html();
var sInputGroupClasses = $(this).parent().attr('class');
var newtest = $(testclass)
var selected = $(this).val();
if(selected == '4') {
$('.two-options').show();
$(this).parent().parent().append(two-options);
} else {
$('.two-options').hide();
}
if(selected == '3') {
$('.enable-disable').show();
$(this).parent().parent().append(enable-disable);
} else {
$('.enable-disable').hide();
}
}
updateValues();
});
$(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:not(:last-child) select', function(){
updateValues();
});
$(document).on('click', '.input-group-addon-remove', function(){
$(this).parent().remove();
updateValues();
});
function updateValues()
{
values = new Array();
$('.form-group-multiple-selects .input-group-multiple-select select').each(function(){
var value = $(this).val();
if(value != 0 && value != ""){
values.push(value);
}
});
$('.form-group-multiple-selects .input-group-multiple-select 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;
}
});