I am trying to create this option here.. The user can choose how many rooms he wants.
When he selects I am appending with JQuery the number of rooms he choosed.
Then he can choose how many adults and children there will be in each room. But when he choose for children I want to append another choice (age of children) depend on how many children.
As you can see I can add the rooms but on children I get all the problems.
1.)When I am adding the number of children i can not make it append only on specific div. And children option is working only for the first one.
2.)I tried to hide children age boxes like the rooms but I can not make it work.
Any feedback on what am i doing wrong would be helpful.
Thanks
So this is my code
$(document).ready(function() {
//onchange of rooms-count
$('#search_rooms_select').change(function() {
var roomsSelected = $('#search_rooms_select option:selected').val();
var roomsDisplayed = $('[id^="room-"]:visible').length;
var roomsRendered = $('[id^="room-"]').length;
//if room count is greater than number displayed - add or show accordingly
if (roomsSelected > roomsDisplayed) {
for (var i = 1; i <= roomsSelected; i++) {
var r = $('#room-' + i);
if (r.length == 0) {
var clone = $('#room-1').clone(); //clone
clone.children(':first').text("Room: ");
//change ids appropriately
setNewID(clone, i);
clone.children('div').children('select').each(function() {
setNewID($(this), i);
});
$(clone).insertAfter($('#room-' + roomsRendered));
} else {
//if the room exists and is hidden
$(r).show();
}
}
} else {
//else if less than room count selected - hide
for (var i = ++roomsSelected; i <= roomsRendered; i++) {
$('#room-' + i).hide();
}
}
});
function setNewID(elem, i) {
oldID = elem.attr('id');
newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
elem.attr('id', newId);
}
$('[id^="children-"]').change(function() {
var kidsSelected = $('[id^="children-"] option:selected').val();
for (i = 1; i <= kidsSelected; i++) {
var htmlChildren = "<div class='col-xs-4 col-md-4 col-sm-4'><span class='labelselect'>Child 1</span><select class='form-control' id='childrenage" + i + "'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></div> ";
$(".childrendiv").append(htmlChildren);
}
var kidsDisplayed = $('[id^="childrenage-"]:visible').length;
var kidsRendered = $('[id^="childrenage-"]').length;
});
});
label {
font-weight: 700;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class='content' id='passengers-popover' style="width: 100%;">
<div class="col-xs-12">
<div class="col-xs-3">
<label class="search_rooms_input" for="search_rooms_input">Rooms:</label>
</div>
<div class="col-xs-9">
<select name="" class="form-control" id="search_rooms_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-12 paddinglr labelform">
<div class="col-xs-4 col-md-4 col-sm-4 paddingright">
<label class="labelselect"></label>
</div>
<div class="col-xs-8 col-md-8 col-sm-8 paddinglr">
<div class="col-xs-6 col-sm-6 col-md-6 paddingright">
<label>Adults</label>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 paddingright">
<label>Children(0-16)</label>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12" id="room-1">
<div class="col-xs-4 col-md-4">
<label>
Room:
</label>
</div>
<div class="col-xs-8 col-md-8 paddinglr">
<div class="col-xs-6 col-sm-6 col-md-6">
<select class="form-control" id='adults-1'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<select class="form-control" id='children-1'>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="childrendiv"> </div>
</div>
<div class="col-xs-12 no-padding">
<button type="button" class="btn btn-default" id="continue">Continue</button>
</div>
</div>
Related
I am trying to use the following code which works well. I'm doing a CRUD operation. When I create an object then it works very well. However when I want to edit then this input field was hidden. I want to hide and show based on values.
$(document).ready(function() {
// debugger;
$('#isRequested').change(function() {
if ($(this).val() == "true" && $(this).val() != "select") {
$('.entity').show();
} else {
$('.entity').hide();
}
})
});
$(document).ready(function() {
$('#isApproved').change(function() {
if ($(this).val() != "true" && $(this).val() != "select") {
$('#denial').show();
} else {
$('#denial').hide();
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 row">
<div class="col-md-4">
<label class="col-form-label text-lg-left" asp-for="IsPreviouslyRequestedAssistance"></label>
<select class="form-control click" id="isRequested" asp-for="IsPreviouslyRequestedAssistance">
<option value="select">Please Select</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<div class="col-md-4 entity showup" style="display:none">
<label id="EntityName" class="col-form-label " asp-for="EntityName"></label>
<input type="text" id="EntityName" asp-for="EntityName" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 row entity" style="display: none">
<div class="col-md-4 ">
<label asp-for="WasApproved" class="col-form-label"></label>
<select id="isApproved" class="form-control " asp-for="WasApproved">
<option value="select">Please Select</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<div class="col-md-4" id="denial" style="display: none">
<label asp-for="ReasonForDenial" class="col-form-label"></label>
<input type="text" class="form-control" asp-for="ReasonForDenial">
</div>
</div>
</div>
Can you tell me what should I do?
I have created a row and inside that row, I have 3 elements, but those 3 elements change to 4 when I select "Other" from the make drop down, and it works absolutely fine. But when I select the "-Other-" from Model dropdown I notice that the model "Other" input field doesn't remain the part of the row and it doesn't work. I'm attaching the following examples for further understanding:
Default:
When I select "other" from make:
When I select "-other" from model:
So to explain it better, I want the model "-other" just like make other i.e all the elements in one row.
Can anyone help, please?
Note: I have achieved the Make "other" using jQuery dynamic class.
Regards,
Bill
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$('#make').on('change', function() {
if (this.value == '*') {
removeClassDynamicClass();
changeModelDiv();
$("#others").addClass("hide");
$("#others input").attr("disabled", "disabled");
$(".model-div-not-others").removeClass("hide");
$(".model-div-not-others select").removeAttr("disabled");
$(".model-div-for-others").addClass("hide");
$('#model').attr('disabled', 'disabled');
$("#country-registeration").attr('disabled', 'disabled');
$("#opt-details").attr('disabled', 'disabled');
} else if (this.value == 'others') {
if ($('.dynamic-class-4').hasClass('col-lg-4')) {
$('.dynamic-class-4').removeClass('col-lg-4');
$('.dynamic-class-4').addClass('col-lg-3');
}
changeModelDiv();
$("#others").removeClass("hide");
$("#others input").removeAttr("disabled");
$(".model-div-not-others").addClass("hide");
$(".model-div-for-others").removeClass("hide");
$(".model-div-for-others input").removeAttr("disabled");
$('#model').attr('disabled', 'disabled');
$("#opt-details").removeAttr('disabled');
// In-case of other countries added remove the below commented code
//$("#country-registeration").removeAttr('disabled');
} else {
var thisOption = $("#make :selected").data("option");
$model.html($options.filter('[data-option="' + thisOption + '"], [value="0"]'));
$("#model option:eq(0)").prop("selected", true);
removeClassDynamicClass();
changeModelDiv();
$("#others").addClass("hide");
$("#others input").attr("disabled", "disabled");
$(".model-div-not-others").removeClass("hide");
$(".model-div-not-others select").removeAttr("disabled");
$(".model-div-for-others").addClass("hide");
$('#model').removeAttr('disabled');
$("#opt-details").removeAttr('disabled');
// In-case of other countries added remove the below commented code
//$("#country-registeration").removeAttr('disabled');
}
});
function removeClassDynamicClass() {
if ($('.dynamic-class-4').hasClass('col-lg-3')) {
$('.dynamic-class-4').removeClass('col-lg-3');
$('.dynamic-class-4').addClass('col-lg-4');
}
}
function changeModelDiv() {
if ($('#make').val() == 'others') {
$('.model-div-not-others').addClass("hide");
$('.model-div-for-others').removeClass("hide");
$('#model-others').removeAttr("disabled");
$('#model').attr('disabled', 'disabled');
} else {
if ($('.model-div-not-others').hasClass("hide")) {
$('.model-div-not-others').removeClass("hide");
$('.model-div-for-others').addClass("hide");
$('#model').removeAttr("disabled");
$('#model-others').attr('disabled', 'disabled');
}
}
}
$('#model').on('change', function() {
if ($('#model :selected').val() == '- Other -') {
//$('.model-div-not-others').addClass("hide");
$('.model-div-for-others').removeClass("hide");
$('#model-others').removeAttr("disabled");
} else {
$('.model-div-for-others').addClass("hide");
$('#model-others').attr("disabled", "disabled");
}
});
$('#make').trigger('change');
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<label class="car-list-step-label">Make</label>
<select class="form-control custom-select" name="make" id="make">
<option disabled="disabled" selected="selected" value="*">Select vehicle make</option>
<option data-option="1">Acura</option>
<option data-option="2">Abarth</option>
<option value="others">Other</option>
</select>
</div>
<!-- Make Others Details -->
<div id="others" class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3 hide">
<label class="car-list-step-label">Make (others)</label>
<input id="details" name="details" type="text" placeholder="Make" class="form-control car-list-input">
</div>
<!-- Vehicle Model -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<div class="model-div-not-others">
<label class="car-list-step-label">Model</label>
<select class="form-control custom-select" name="model" id="model">
<option value="0" disabled="disabled" selected="selected">Select vehicle model</option>
<!-- Acura -->
<option data-option="1">1.6 EL</option>
<option data-option="1">1.7 EL</option>
<option data-option="1">2.3 CL</option>
<option data-option="1">2.5 TL</option>
<option data-option="1">3.0 CL</option>
<option data-option="1">3.2 TL</option>
<option data-option="1">3.5 RL</option>
<option data-option="1">CL</option>
<option data-option="1">CSX</option>
<option data-option="1">EL</option>
<option data-option="1">ILX</option>
<option data-option="1">Integra</option>
<option data-option="1">Legend</option>
<option data-option="1">MDX</option>
<option data-option="1">NSX</option>
<option data-option="1">NSX-T</option>
<option data-option="1">RDX</option>
<option data-option="1">RL</option>
<option data-option="1">RSX</option>
<option data-option="1">SLX</option>
<option data-option="1">TL</option>
<option data-option="1">TSX</option>
<option data-option="1">Vigor</option>
<option data-option="1">ZDX</option>
<option data-option="1">- Other -</option>
<!-- Abarth -->
<option data-option="2">124</option>
<option data-option="2">500</option>
<option data-option="2">500C</option>
<option data-option="2">595</option>
<option data-option="2">595C</option>
<option data-option="2">695</option>
<option data-option="2">Grande Punto</option>
<option data-option="2">Punto Evo</option>
<option data-option="2">Spider Cabrio</option>
<option data-option="2">- Other -</option>
</select>
</div>
</div>
<!-- Vehicle Model Others -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<div class="model-div-for-others hide">
<label class="car-list-step-label">Model (others)</label>
<input disabled id="model-others" name="models" type="text" placeholder="Model" class="form-control car-list-input">
</div>
</div>
<!-- Vehicle Optional Details -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<label class="car-list-step-label">Details (optional)</label>
<input id="opt-details" name="opt-details" type="text" placeholder="Additional details" class="form-control car-list-input">
</div>
</div>
It is not being formatted like the other dropdowns because it is currently within the Model's col based div. You should put your Model (others) element into it's own col based div, just like the rest of the dropdowns like so:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
<div class="model-div-for-others hide">
<label class="car-list-step-label">Model (others)</label>
<input disabled id="model-others" name="models" type="text" placeholder="Model" class="form-control car-list-input">
</div>
</div>
Hello guys i'm struggling with this problem.
I have html select with options and a input field to receive the values of the selected options.
So i have a script with FOR to get the options selected, in that input field.
The issue is that in the FOR cicle it writtes repeated values.
In the link posted you will see the problem.
This is the website for testing want i have
This is my code.
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
allowClear: true
});
function getSelectedOptions(sel) {
var opts = [],
opt;
var len = sel.options.length;
var input = document.getElementById("inputId1");
for (var i = 0; i < len; i++) {
opt = sel.options[i];
if (opt.selected) {
input.value += opt.value + ",";
//alert(opt.value);
}
}
//return opts;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<select id="selectedOptions" class="js-example-basic-multiple" name="colaboradores[]" multiple="multiple" style="width:100% !important;" onchange="getSelectedOptions(this)">
<option value="U1">User 1</option>
<option value="U2">User 2</option>
<option value="U3">User 3</option>
<option value="G1">Grupo 1</option>
<option value="G2">Grupo 2</option>
<option value="G3">Grupo 3</option>
</select>
</div>
</div>
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="inputId1">Valores recebidos do select 2</label>
<input type="text" class="form-control" id="inputId1" aria-describedby="peqDesc">
<small id="peqDesc" class="form-text text-muted">Estas são as variáveis que recebo do select 2</small>
</div>
</div>
</div>
</div>
You need to empty the input with input.value = '' before the for loop before rewriting the values :
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
function getSelectedOptions(sel) {
var opts = [],
opt;
var len = sel.options.length;
var input = document.getElementById("inputId1");
input.value = ''
for (var i = 0; i < len; i++) {
opt = sel.options[i];
if (opt.selected) {
input.value += opt.value + ",";
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<select id="selectedOptions" class="js-example-basic-multiple" name="colaboradores[]" multiple="multiple" style="width:100% !important;" onchange="getSelectedOptions(this)">
<option value="U1">User 1</option>
<option value="U2">User 2</option>
<option value="U3">User 3</option>
<option value="G1">Grupo 1</option>
<option value="G2">Grupo 2</option>
<option value="G3">Grupo 3</option>
</select>
</div>
</div>
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="inputId1">Valores recebidos do select 2</label>
<input type="text" class="form-control" id="inputId1" aria-describedby="peqDesc">
<small id="peqDesc" class="form-text text-muted">Estas são as variáveis que recebo do select 2</small>
</div>
</div>
</div>
</div>
I am trying to sum up the values selecting from multi-select drop down and display the total in another text/input field .... is there any possible way to do that ?
document.getElementById('amt').addEventListener('change', function() {
var total = 0,
selected = this.selectedOptions,
l = selected.length;
for (var i = 0; i < l; i++) {
total += parseInt(selected[i].value, 10);
}
if (!isNaN(total)) {
document.getElementById('hidden').value = total;
}
});
<div class="col-sm-6 col-xs-12 col-md-6 col-lg-6">
<label for="payment_invoice_id" class="col-sm-5 col-xs-4 col-md-4 col-lg-4 control-label text-left">Invoice No.<sup class="text-red">*</sup> </label>
<div class="col-sm-7 col-xs-12 col-md-8 col-lg-8" id="invoiceno">
<select class="multi-select" multiple='multiple' name="amt[]" id="amt" onChange="document.getElementById('hidden').innerHTML = this.value;">
<option value=""></option>
<option value="5">5Rs</option>
<option value="10">10Rs</option>
<option value="15">15Rs</option>
</select>
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6 col-lg-6" >
<label for="tax_type" class="col-sm-6 col-xs-7 col-md-4 col-lg-4 control-label">Hidden<sup class="text-red">*</sup></label>
<div class="col-sm-6 col-xs-12 col-md-8 col-lg-8">
<input type="text" class="form-control" id="hidden" name="hidden" placeholder="Hidden" autocomplete="off" onChange="sum()" />
</div>
</div>
Thanks for all your help got the solution...
<script>
$('#amt').change(function () {
var selected = $("#amt option:selected");
var sum = 0;
//console.log($(this).val());
selected.each(function () {
var tsum = $(this).val();
sum += Number(tsum);
});
$('#hidden').val(sum);
});
</script>
I am trying to generate HTML by joining content from two separate arrays of equal size. For each index in the arrays a pair of selects should be created. The first select would have elements from the first array and the second would have elements from the second array. In both selects, the current element should be selected.
I can create the first set of selects as demonstrated below, but I cannot figure out how to create the second set of selects.
var myArryNames = [
"John",
"jennifer",
"Angel"
];
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
];
$('#bookForm').on('click', '.mynewButton', function() {
$(this).addClass('hide');
$('#bookTemplate-1').removeClass('hide');
for (var j = 1; j < myArryValues.length; j++) {
var thisRow = $('.dropdown').last(".dropdown");
var newid = parseInt(thisRow.attr('divid')) + 1;
newRow = thisRow.clone(true).insertAfter(thisRow).
find('select').each(function() {
$(this).attr('name', 'myDropdown[' + (newid - 1) + ']');
}).end().
find('option[value="' + myArryValues[j] + '"]').each(function() {
$(this).attr('selected', 'selected');
}).end();
thisRow.next('.dropdown').attr("divid", newid).attr("id", "bookTemplate-" + newid);
//$('select[id="bookTemplate-'+newid+'"]').val(myArryValues[j]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<div id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-12 button-div">
<button type="button" class="mynewButton">Add New</button>
</div>
</div>
<div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
<div class="field-row">
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown[0]">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames[0]">
<option value="John">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
</div>
</div>
</div>
HTML OUTPUT SHOULD LOOK LIKE BELOW
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World" selected="selected">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John" selected="selected">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript" selected="selected">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John">John</option>
<option value="Jennifer" selected="selected">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript" >Javascript</option>
<option value="Jquery" selected="selected">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John">John</option>
<option value="Jennifer" >Jennifer</option>
<option value="Angel" selected="selected">Angel</option>
</select>
</div>
The code below is a modification to your code that I believe does what is wanted by using the "nth-child" selector in jQuery.
Added code to do this by value instead.
var myArryNames = [
"John",
"Jennifer",
"Angel"
];
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
];
$('#bookForm').on('click', '.mynewButton', function() {
$(this).addClass('hide');
$('#bookTemplate-1').removeClass('hide');
var thisRow = $('.dropdown').last(".dropdown");
// Copy the two new rows
for (var j = 0; j < myArryValues.length; j++) {
var row;
// If j is non-zero, we need a new row
if (j) {
var newid = parseInt(thisRow.attr('divid')) + 1;
row = thisRow.clone(true).insertAfter(thisRow);
row.find('.myDropdown').attr('name', 'myDropdown[' + (newid - 1) + ']');
}
else {
row = thisRow;
}
// Alternate 1: select the appropriate options by position. This find will return elements from both divs, but since we don't care what the data is, just the position it works correctly
//row.find('option:nth-child('+(j+1)+')').attr('selected', 'selected');
// Alternate 2: Select the appropriate options by setting the value on the select itself
//row.find('.myDropdown').val(myArryValues[j]);
//row.find('.myNames').val(myArryNames[j]);
// Alternate 3: Manually modify the "selected" attribute of the appropriate options.
row.find('.myDropdown option[value="'+myArryValues[j]+'"]').attr('selected', 'selected');
row.find('.myNames option[value="'+myArryNames[j]+'"]').attr('selected', 'selected');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<div id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-12 button-div">
<button type="button" class="mynewButton">Add New</button>
</div>
</div>
<div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
<div class="field-row">
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown[0]">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames[0]">
<option value="John">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
</div>
</div>
</div>