I'm stuck append double, I know the problem is that when I select the first I choose dynamic, when I change the second it selects static when I add the option button, why does the input become double?. how to fix append input not double. but if I first choose static and don't choose anything else, then not problem.
$(document).on('change', '#select-input-view', function(e) {
e.preventDefault()
let select = $(this).find(':selected').attr('data-input')
arr_select = select.split("-")
if (arr_select[1] == 'static') {
document.getElementById('select-id-input-view-' + arr_select[2]).innerHTML = ``
document.getElementById('select-id-input-view-' + arr_select[2]).innerHTML = `
<div id="static-option-${arr_select[2]}" class="mb-3">
<button id="add-option-select-view-${arr_select[2]}" class="btn btn-primary">add option</button>
<button id="remove-option-select-view-${arr_select[2]}" class="btn btn-danger">remove option</button>
<div id="view-option-${arr_select[2]}" class="mt-3">
</div>
</div>
`
var num_option_insert = $('.data-div-option').length;
$(document).on('click', '#add-option-select-view-' + arr_select[2], function(e) {
e.preventDefault()
thisid = this.id
arr_id = thisid.split("-")
num_option_insert += 1
option = `
<div id="option-div-view-${num_option_insert}-${arr_id[4]}" data-div-option="${num_option_insert}" class="col-md-3">
<label class="form-label">select option ${num_option_insert}</label>
<input name="123" type="text" class="form-control" required>
</div>
`
view_option = document.getElementById('view-option-' + arr_id[4])
$(view_option).append(option)
})
// delete fields
$(document).on('click', '#remove-option-select-view-' + arr_select[2], function(e) {
e.preventDefault()
thisid = this.id
arr_id = thisid.split("-")
console.log(arr_id)
var row = $('#option-div-view-' + num_option_insert + '-' + arr_id[4]);
row.remove();
num_option_insert -= 1
})
} else {
document.getElementById('select-id-input-view-' + arr_select[2]).innerHTML = ``
document.getElementById('select-id-input-view-' + arr_select[2]).innerHTML = `
<div id="dynamic-option-1" class="mb-3">
<div class="mb-3">
<label class="form-label">Select Data Dynamic</label>
<select name="select-dynamic" class="form-select" required>
<option selected disabled>Select data dynamic</option>
<?php foreach ($table_database as $data) {
$table = $data->Tables_in_db_builder;
$arr = explode("_", $table);
if ($arr[0] != 'sys') {
?>
<option><?= $data->Tables_in_db_builder ?></option>
<?php }
} ?>
</select>
</div>
</div>`
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-input-view" name="input-type" class="form-select">
<option>text</option>
<option>number</option>
<option>textarea</option>
<option data-input="select-static-1">select static</option>
<option data-input="select-dynamic-1">select dynamic</option>
<option>float</option>
<option>date</option>
</select>
<div id="select-id-input-view-1">
</div>
Use event delegation so you only create listeners for the add-option and remove-option buttons once, not every time you add a new set of buttons.
Also, this line was wrong:
var num_option_insert = $('.data-div-option').length;
You have no data-div-option class, you have attributes like data-div-option="${num_option_insert}". The correct selector to match these elements is [data-div-option].
$(document).on('click', '.add-option-select-view', function(e) {
e.preventDefault()
var num_option_insert = $('[data-div-option]').length;
thisid = this.id
arr_id = thisid.split("-")
num_option_insert += 1
option = `
<div id="option-div-view-${num_option_insert}-${arr_id[4]}" data-div-option="${num_option_insert}" class="col-md-3">
<label class="form-label">select option ${num_option_insert}</label>
<input name="123" type="text" class="form-control" required>
</div>
`
view_option = document.getElementById('view-option-' + arr_id[4])
$(view_option).append(option)
})
// delete fields
$(document).on('click', '.remove-option-select-view', function(e) {
e.preventDefault()
var num_option_insert = $('[data-div-option]').length;
thisid = this.id
arr_id = thisid.split("-")
console.log(arr_id)
var row = $('#option-div-view-' + num_option_insert + '-' + arr_id[4]);
row.remove();
num_option_insert -= 1
})
$(document).on('change', '#select-input-view', function(e) {
e.preventDefault()
let select = $(this).find(':selected').attr('data-input')
arr_select = select.split("-")
if (arr_select[1] == 'static') {
document.getElementById('select-id-input-view-' + arr_select[2]).innerHTML = `
<div id="static-option-${arr_select[2]}" class="mb-3">
<button id="add-option-select-view-${arr_select[2]}" class="btn btn-primary add-option-select-view">add option</button>
<button id="remove-option-select-view-${arr_select[2]}" class="btn btn-danger remove-option-select-view">remove option</button>
<div id="view-option-${arr_select[2]}" class="mt-3">
</div>
</div>
`
} else {
document.getElementById('select-id-input-view-' + arr_select[2]).innerHTML = `
<div id="dynamic-option-1" class="mb-3">
<div class="mb-3">
<label class="form-label">Select Data Dynamic</label>
<select name="select-dynamic" class="form-select" required>
<option selected disabled>Select data dynamic</option>
<?php foreach ($table_database as $data) {
$table = $data->Tables_in_db_builder;
$arr = explode("_", $table);
if ($arr[0] != 'sys') {
?>
<option><?= $data->Tables_in_db_builder ?></option>
<?php }
} ?>
</select>
</div>
</div>`
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-input-view" name="input-type" class="form-select">
<option>text</option>
<option>number</option>
<option>textarea</option>
<option data-input="select-static-1">select static</option>
<option data-input="select-dynamic-1">select dynamic</option>
<option>float</option>
<option>date</option>
</select>
<div id="select-id-input-view-1">
</div>
Related
I want to prevent multiple selections of same value in my project.
My form
<div class="form-row">
<div class="form-group col-md-6">
<select name="number" class="form-control" id="index0">
<option value="">Select Number</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group col-md-4">
<button class="btn btn-primary" id="addNumber" onclick="addNumber();">Add Number</button>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<select name="letter" class="form-control" id="index00">
<option value="">Select Letter</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div class="form-group col-md-4">
<button class="btn btn-primary" onclick="addLetter();">Add Letter</button>
</div>
</div>
<div class="newHtml">
<div class="newLetter">
</div>
</div>
I have two select box one for number and one for letter.
A number can have many letters eg, number 1 can have letters A,B,C,D,E, etc and same goes for other numbers.
When I append new form clicking add number button the selected number should not display there. And if for number 1 letter A is already selected then A should not appear for that number 1 if I click add letter button.
How to achieve that?
Actually it's not so much hard with jQuery/CSS selectors. Try that one:
let letters = ["A", "B", "C", "D", "E"];
function addNumber() {
let val1 = $("#index0").val();
let val2 = $("#index00").val();
if ($(".newLetter > .number[data-value=" + val1 + "]").length == 0) {
$(".newLetter").append(
'<div data-value="' + val1 + '" class="number">' + val1 + "</div>"
);
$('#index0 > option[value="' + val1 + '"]').remove();
$('#index00 > option[value="' + letters[parseInt(val1) - 1] + '"]').remove();
}
}
function addLetter() {
let val1 = $("#index0").val();
let val2 = $("#index00").val();
if ($(".newLetter > .letter[data-value=" + val2 + "]").length == 0) {
$(".newLetter").append(
'<div data-value="' + val2 + '" class="letter">' + val2 + "</div>"
);
$('#index1 > option[value="' + val2 + '"]').remove();
}
}
Look at it on codepen
You should create an array, so can integrate the values. I may not understand correctly.
Is this something like you want to achieve?
let records = [];
const numberDropdown = document.querySelector("#dropdown-number"),
letterDropdown = document.querySelector("#dropdown-letter"),
submitButton = document.querySelector("#submit-btn");
submitButton.addEventListener("click", handleEntry);
numberDropdown.addEventListener("change", updateDropdowns);
letterDropdown.addEventListener("change", updateDropdowns);
function handleEntry() {
let selectedNumber = numberDropdown.value,
selectedLetter = letterDropdown.value;
records.push({
number: selectedNumber,
letter: selectedLetter
});
updateList();
updateDropdowns();
let i = 0;
while (letterDropdown.options[i].disabled) {
i++
};
letterDropdown.selectedIndex = i;
}
function updateDropdowns() {
if (records.length) {
let noLeft = true;
document.querySelectorAll("#dropdown-letter option").forEach((option) => {
let taken = false;
records.forEach((record) => {
if (
option.value == record.letter &&
numberDropdown.value == record.number
) {
taken = true;
}
});
if (taken) {
option.disabled = true;
} else {
option.disabled = false;
noLeft = false;
}
});
if (noLeft) {
submitButton.disabled = true;
alert('select another number');
} else {
submitButton.disabled = false;
}
} else {
document.querySelectorAll("#number-dropdown option").forEach((option) => {
option.disabled = false;
});
}
}
updateDropdowns();
updateList();
function updateList() {
document.querySelector('#list').innerHTML = '';
records.forEach((record) => {
document.querySelector('#list').innerHTML += `<li>${record.letter} | ${record.number}</li>`
});
}
<select id="dropdown-number">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="dropdown-letter">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<button id="submit-btn">Add</button>
<p>Entries:</p>
<ul id="list"></ul>
I am having div with input elements with Add and Cancel buttons.
When user clicked on add Button,I need to generate div with the same input elements and capture the value to JSon object.
Here is my code snippet
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
I tried with clone and trying to retrieve values from the input elements inside div,but I am facing issue with getting values and generating ids.
$('#addBtn_' + count).click(function () {
var newel = $("#filterfields").clone(true);
var jsonData = [];
$(newel).insertAfter("#filterfields");
var index;
$("#filterfields").find('input:text,select').each(function () {
let str = '{"' + this.id + '":' + (this.value + '}';
jsonData.push(str);
}).end()
newel.find(':input').each(function () {
var oldId = $(this).attr("id");
var split = oldId.toString().split('_');
index = parseInt(split[1]);
var curId = split[0];
var newId = curId + "_" + index + 1;
this.id = newId;
}).end()
jsonData.push('"filterClause":' + $('input[name="inlineRadioOptions"]:checked').val() + '"');
});
Please suggest me if there is better way to achieve the similar function as I am not able to get values of input elements of current row.
Consider the following code.
$(function() {
function formToJson(fObj) {
var j = [];
fObj.children().not("button, label").each(function(i, el) {
// Will avoid buttons and labels
if (!($(el).is(":radio") && !$(el).is(":checked"))) {
// Will avoid unselected Radio Buttons
var d = {
nodeName: $(el).prop("nodeName"),
props: {
class: $(el).attr("class"),
id: $(el).attr("id")
},
value: $(el).val(),
name: $(el).attr("name")
};
if (d.nodeName != "SELECT") {
d.props.type = $(el).attr("type");
}
j.push(d);
}
});
return j;
}
$("[id^='addBtn']").click(function() {
var jsonData = formToJson($("#filterFieldsForm"));
console.log(jsonData);
var filter = "Filter: ";
$.each(jsonData, function(key, item) {
if (key != 2) {
filter += item.value + " ";
} else {
filter += "'" + item.value + "' ";
}
});
$("<div>", {
class: "filter-results"
}).html(filter).appendTo("body");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
As you are iterating over elements, it is best to use .each(). Using the proper selector, we can target just the form elements you want. You then want a condition to ensure that if a Radio Button is selected (or checked) that it is included and others are excluded.
The result is an Array of Objects that can be used to rebuild the HTML Structure or just build new copies.
Update
$(function() {
function formToJson(fObj) {
var j = [];
fObj.each(function(i, el) {
var d = {};
$("select, input", el).each(function(k, v) {
if (!($(v).is(":radio") && !$(v).is(":checked"))) {
d[$(v).attr("id")] = $(v).val();
}
});
j.push(d);
});
return j;
}
$("[id^='addBtn']").click(function() {
var jsonData = formToJson($("#filterFieldsForm"));
console.log(jsonData);
var filter = "Filter: ";
$.each(jsonData, function(key, item) {
if (key != 2) {
filter += item.value + " ";
} else {
filter += "'" + item.value + "' ";
}
});
$("<div>", {
class: "filter-results"
}).html(filter).appendTo("body");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
This will target the various rows and for each row, it will gather all the Select and Inputs.
I'm having some issues getting the removeElement function to work as expected. I want the addElement function to add a new input group with a dropdown and a Remove button (which it does). The Remove button should call the removeElement function, removing the respective input group, which it does the first time but no more.
Here is the Code:
function addElement(parentId, elementTag, elementId, html) {
// Adds an element to the document
var p = document.getElementById(parentId);
var newElement = document.createElement(elementTag);
newElement.setAttribute('id', elementId);
newElement.innerHTML = html;
p.appendChild(newElement);
}
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
var serviceID = 0; // reset number of services added
function addService() {
serviceID++; // increment for UID for new input
var html = `<div class="form-row"><div class="form-group col-6"><select name="service[]" class="form-control"><option value="basic">Basic Service</option><option value="full">Full Service</option><option value="tie">Ski Tie</option></select></div><div class="form-group col-3"><input type="button" class="btn btn-danger" onclick="javascript:removeElement('service' + serviceID + ''); return false;" value="Remove"></div></div>`;
addElement('services', 'div', 'service' + serviceID, html);
}
<div id="services">
<h4>Services</h4><br>
<div class="form-row">
<div class="form-group col-6">
<select name="service[]" class="form-control">
<option value="basic">Basic Service</option>
<option value="full">Full Service</option>
<option value="tie">Ski Tie</option>
</select>
</div>
</div><br>
There seems to be two issues in your code (based on what you have shared)
serviceID needs to be declared globally so that onclick handler can access the same.
No element is assigned the id as services
like
<h4 id="services">Services</h4><br>
Finally you need to invoke addService method as well.
Demo
var serviceID = 0;
function addElement(parentId, elementTag, elementId, html) {
// Adds an element to the document
var p = document.getElementById(parentId);
var newElement = document.createElement(elementTag);
newElement.setAttribute('id', elementId);
newElement.innerHTML = html;
p.appendChild(newElement);
}
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
function addService() {
serviceID++; // increment for UID for new input
var html = `<div class="form-row"><div class="form-group col-6"><select name="service[]" class="form-control"><option value="basic">Basic Service</option><option value="full">Full Service</option><option value="tie">Ski Tie</option></select></div><div class="form-group col-3"><input type="button" class="btn btn-danger" onclick="javascript:removeElement('service' + serviceID + ''); return false;" value="Remove"></div></div>`;
addElement('services', 'div', 'service' + serviceID, html);
}
addService() ;
<h4 id="services">Services</h4><br>
<div class="form-row">
<div class="form-group col-6">
<select name="service[]" class="form-control">
<option value="basic">Basic Service</option>
<option value="full">Full Service</option>
<option value="tie">Ski Tie</option>
</select>
</div>
</div>
I have a form and I would like to set it up so that when a user enters/selects values into the inputs and clicks the "Add" button, it will clone each of the inputs/select boxes, assign them to a variable and then append them to another element below. What i have currently is just returning [object Object] instead of cloning the elements. Where am I going wrong?
$(function() {
$('button').click(function() {
var $name = $('#name').clone(),
$email = $('#email').clone(),
$package = $('#package').clone(),
$newRow = '<div class="name">' + $name + '</div><div class="email">' + $email + '</div><div class="package">' + $package + '</div>';
$('.row').append($newRow);
});
});
.row {
display:table-row;
}
.row > div {
display:table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
<option value="one">Package One</option>
<option value="two">Package Two</option>
<option value="three">Package Three</option>
</select>
<button>ADD ROW</button>
<div class="row">
</div>
Append each cloned element to its own div. Then append all divs into the row.
Due to a bug, you must force value on the cloned select box
$(function() {
$('button').click(function() {
var $name = $('<div class="name"></div>').append($('#name').clone()),
$email = $('<div class="email"></div>').append($('#email').clone()),
$package = $('<div class="package"></div>').append($('#package').clone());
$package.find('#package').val($('#package').val());
$('.row').append($name, $email, $package);
});
});
.row {
display:table-row;
}
.row > div {
display:table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
<option value="one">Package One</option>
<option value="two">Package Two</option>
<option value="three">Package Three</option>
</select>
<button>ADD ROW</button>
<div class="row">
</div>
One last thing. You shouldn't be recognizing elements by id= as those are meant to be unique per whole page. Try rewriting your code so you could use classes for selectors. For example:
<input class="i_name" />
...
$('.i_name').clone()
You just need to append the cloned objects.
$(function() {
$('button').click(function() {
var $name = $('#name').clone(),
$email = $('#email').clone(),
$package = $('#package').clone();
$('.row').append($name);
$('.row').append($email);
$('.row').append($package);
});
});
.row {
display:table-row;
}
.row > div {
display:table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
<option value="one">Package One</option>
<option value="two">Package Two</option>
<option value="three">Package Three</option>
</select>
<button>ADD ROW</button>
<div class="row">
</div>
I don't fully understand what do you need but clone return an object that's why appending to a string will return into a [object Object]. Perhaps you could use outerHTML.
$(function() {
$('button').click(function() {
var $name = $('#name').clone();
$email = $('#email').clone();
$package = $('#package').clone();
$newRow = '<div class="name">' + $name[0].outerHTML + '</div><div class="email">' + $email[0].outerHTML + '</div><div class="package">' + $package[0].outerHTML + '</div>';
$('.row').append($newRow);
});
});
.row {
display:table-row;
}
.row > div {
display:table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
<option value="one">Package One</option>
<option value="two">Package Two</option>
<option value="three">Package Three</option>
</select>
<button>ADD ROW</button>
<div class="row">
</div>
I want to have one select list populated with different values (price) depending on which option was chosen in other select list (sale or rent)
So what I have done is first create the arrays for sale and rent.
Then get the jquery and do an change event to pick which selection was made.
then a Switch statement that should populate the select list in question, but it is not showing anything. While jquery is a library for javascript I dont know if mixing them like I have done is alright:
$('#transaction').change(function(){
$value = $('#transaction').val();
var sale = [];
for (var i = 350000; i <= 2000000; i+100000) {
sale.push(i);
}
var rent = [];
for (var i = 500; i <= 6000; i+100) {
rent.push(i);
}
switch($value) {
case 'sale':
$.each(sale, function(key, value){
$('#price').append('<option value="' + index+ '">' + value + '</option>')
break;
case 'rent':
break;
}); // end of each
} // end of switch
}) ; //end of jquery snippet
<div class="row">
<div class="col-md-2 col-md-offset-1">
<div class="form-group">
{{Form::label('transaction', 'Transaction')}}
<select name="transaction" id="transaction" class="form-control">
<option value="select">Select</option>
<option value="sale">Sale</option>
<option value="rent">Rent</option>
<option value="holiday">Holiday</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{Form::label('price', 'Price')}}
<select name="price" id="price" class="form-control">
</select>
</div>
</div>
You dont have the options element in your select tag, so it never gets the $value from this statement :- $value = ('#transaction').val();
Insert the option tags and then run your example.
All credits go to Keith Wood (Sydney)
$(function() {
$('#transaction').change(function() {
var sale = [];
for (var i = 350000; i <= 2000000; i += 100000) {
sale.push(i);
}
var rent = [];
for (var i = 500; i <= 6000; i += 100) {
rent.push(i);
}
var option = $('#transaction').val();
var prices = (option === '1' ? sale : (option === '2' ? rent : []));
var options = '';
$.each(prices, function(key, value) {
options += '<option value="' + value + '">' + value + '</option>';
});
$('#price').html(options);
});
});
<div class="col-md-2 col-md-offset-1">
<div class="form-group">
{{Form::label('street', 'Transaction')}}
<select name="transaction" id="transaction" class="form-control">
<option value="0">Select</option>
<option value="1">Sale</option>
<option value="2">Rent</option>
<option value="3">Holiday</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{Form::label('price', 'Price')}}
<select name="price" id="price" class="form-control">
</select>
</div>
</div>