I am trying to keep select option value selected during the edit. There I used javascript for the dynamic dependent dropdown list. But now I am facing a problem to keep option value selected during the edit. Would someone help me please to solve this problem? edit.blade.php -
<form class="form-material form-horizontal" action="{{ route('admin.commercial.orders.update', $order->id) }}" method="POST">
#method('PUT')
#csrf
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-12" for="name">Buyer Name: </label>
<div class="col-md-12">
<select class="form-control select2" name="name" id="buyerName">
<option value="">Select Buyer</option>
</select>
#if ($errors->has('name'))
<small class="error">{{ $errors->first('name') }}</small>
#endif
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-12" for="job_name">Job Name/Title: </label>
<div class="col-md-12">
<select class="form-control select2" name="job_name" id="jobName">
<option value="">Select Job</option>
</select>
#if ($errors->has('job_name'))
<small class="error">{{ $errors->first('job_name') }}</small>
#endif
</div>
</div>
</div>
</div>
</form>
And javascript for dependant dropdown-
<script type="text/javascript">
$(function () {
$(".select2").select2();
});
/** Dependent Dropdowns**/
$(function() {
dynamicDropdown('/admin/commercial/get-buyers', '#buyerName');
$('#buyerName').change(function() {
let url = `/admin/commercial/get-buyer-jobs/${this.value}`;
let target = '#jobName';
dynamicDropdown(url, target);
});
});
function dynamicDropdown(url, selector) {
$.get(url, function (data) {
let $select = $(selector);
$select.find('option').not(':first').remove();
let options = [];
$.each(data, function(index, item) {
options.push(`<option value="${item.id}">${item.name}</option>`);
})
$select.append(options);
});
}
</script>
My edit function is -
public function edit($id)
{
$order = BuyerOrder::find($id);
return view('admin.marchendaising.commercials.orders.edit', compact('order'));
}
Add this to the bottom of your javascript;
$("#buyerName").val("{{old('name')}}");
$("#jobName").val("{{old('job_name')}}");`
You may try this idea:
<select name="buyer">
#foreach(['buyer1', 'buyer2', 'buyer3'] as $buyer)
<option vlaue="{{ $buyer }}"{{ (old('buyer') == $buyer) ? ' selected' : '' }}>{{ $buyer }}</option>
#endforeach
</select>
OR
<select name="buyer">
#foreach(['buyer1', 'buyer2', 'buyer3'] as $buyer)
<option vlaue="{{ $buyer }}"{{ ($order->buyer == $buyer) ? ' selected' : '' }}>{{ $buyer }}</option>
#endforeach
</select>
Related
I want to make it so that when I click on one of the dropdowns, the value according to the record id in the related table immediately appears.
I want to make it so that when I click on one of the dropdowns, the value according to the record id in the related table immediately appears.
when "golongan" is selected then the value of "gaji pokok" automatically appears.
when "asisten ahli" is selected then the value of "tunjangan fungsional" automatically appears.
when "pembantu ketua | asisten ahli" is selected then the value of "tunjangan struktural" automatically appears.
<div class="modal fade" id="tambahgajiModal" tabindex="-1" role="dialog" aria-labelledby="tambahgajiModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tambahfungsiModal">Tambah Gaji Karyawan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/gaji/insert" method="POST" enctype="multipart/form-data">
#csrf
<div class="content">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<select name="nama" type="text" class="form-control select2 #error('nama') is-invalid #enderror" value="{{ old('nama') }}">
<option>-- Nama Karyawan --</option>
#foreach ($karyawan as $data)
<option value="{{ $data->nama }}">{{ $data->nama }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('nama')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="gol" type="text" class="form-control select2 #error('gol') is-invalid #enderror" onchange="getddl()" value="{{ old('gol') }}">
<option>-- Golongan dan M K G --</option>
#foreach ($golongan as $data)
<option value="{{ $data->gol }} | {{ $data->mkg }}">{{ $data->gol }} | {{ $data->mkg }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_gol" type="text" placeholder="Gaji Pokok" class="form-control #error('tunjangan_gol') is-invalid #enderror" value="{{ old('tunjangan_gol') }}" id="gol">
<div class="invalid-feedback">
#error('tunjangan_gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="jbt_fungsi" type="text" class="form-control select2 #error('jbt_fungsi') is-invalid #enderror" value="{{ old('jbt_fungsi') }}">
<option>-- Jabatan Fungsional --</option>
#foreach ($fungsi as $data)
<option value="{{ $data->jbt_fungsi }}">{{ $data->jbt_fungsi }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_fungsi" type="text" placeholder="Tunjangan Fungsional" class="form-control #error('tunjangan_fungsi') is-invalid #enderror" value="{{ old('tunjangan_fungsi') }}">
<div class="invalid-feedback">
#error('tunjangan_fungsi')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="jbt_struktur" type="text" class="form-control select2 #error('jbt_struktur') is-invalid #enderror" value="{{ old('jbt_struktur') }}">
<option>-- Jabatan Struktural & Fungsional --</option>
#foreach ($struktur as $data)
<option value="{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}">{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('jbt_struktur')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_struktur" type="text" placeholder="Tunjangan Struktural" class="form-control #error('tunjangan_struktur') is-invalid #enderror" value="{{ old('tunjangan_struktur') }}">
<div class="invalid-feedback">
#error('tunjangan_struktur')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="total_gaji" type="text" placeholder="Total Gaji" class="form-control #error('total_gaji') is-invalid #enderror" value="{{ old('total_gaji') }}">
<div class="invalid-feedback">
#error('total_gaji')
{{ $message }}
#enderror
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
how to package it with Javascript onChange in laravel ?
Sorry, I couldn't understand your language well, but you can do something like this with jquery
<div class="form-group mb-3">
<select id="country-dropdown" class="form-control">
<option value="">-- Select Country --</option>
#foreach ($countries as $data)
<option value="{{$data->id}}">
{{$data->name}}
</option>
#endforeach
</select>
</div>
<div class="form-group mb-3">
<select id="state-dropdown" class="form-control">
</select>
</div>
<div class="form-group">
<select id="city-dropdown" class="form-control">
</select>
</div>
you can leave the dependent dropdown empty, then get those depentdent dropdown through ajax like these:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
/*------------------------------------------
--------------------------------------------
Country Dropdown Change Event
--------------------------------------------
--------------------------------------------*/
$('#country-dropdown').on('change', function () {
var idCountry = this.value;
$("#state-dropdown").html('');
$.ajax({
url: "{{url('api/fetch-states')}}",
type: "POST",
data: {
country_id: idCountry,
_token: '{{csrf_token()}}'
},
dataType: 'json',
success: function (result) {
$('#state-dropdown').html('<option value="">-- Select State --</option>');
$.each(result.states, function (key, value) {
$("#state-dropdown").append('<option value="' + value
.id + '">' + value.name + '</option>');
});
$('#city-dropdown').html('<option value="">-- Select City --</option>');
}
});
});
/*------------------------------------------
--------------------------------------------
State Dropdown Change Event
--------------------------------------------
--------------------------------------------*/
$('#state-dropdown').on('change', function () {
var idState = this.value;
$("#city-dropdown").html('');
$.ajax({
url: "{{url('api/fetch-cities')}}",
type: "POST",
data: {
state_id: idState,
_token: '{{csrf_token()}}'
},
dataType: 'json',
success: function (res) {
$('#city-dropdown').html('<option value="">-- Select City --</option>');
$.each(res.cities, function (key, value) {
$("#city-dropdown").append('<option value="' + value
.id + '">' + value.name + '</option>');
});
}
});
});
});
</script>
and declare the routes that you will call in url in ajax
Route::post('etch-states', [DropdownController::class,
'fetchState']);
Route::post('fetch-cities', [DropdownController::class, 'fetchCity']);
In the controller do something like this:
public function fetchState(Request $request)
{
$data['states'] = State::where("country_id", $request->country_id)
->get(["name", "id"]);
return response()->json($data);
}
/**
* Write code on Method
*
* #return response()
*/
public function fetchCity(Request $request)
{
$data['cities'] = City::where("state_id", $request->state_id)
->get(["name", "id"]);
return response()->json($data);
}
I'm trying to insert multiple row data in two DB tables using single click but this code insert only one row at a time. When i try dd($request->all()); i got data in array but insert only one row. What is the problem and how can i fix it?
protected $table = 'biniyojan';
////Modified Controller//////
public function bbcreate(Request $request)
{
//dd($request->all());
$biniyojan_details = new BiniyojanDetails();
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->details_id;
$biniyojan->date = $request->date;
$biniyojan->ab = $request->ab;
$biniyojan->school = $request->school;
$biniyojan->behora = $request->behora;
$biniyojan->save();
$biniyojan_details = new BiniyojanDetails();
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details['biniyojan_id'] = $biniyojan->id;
$biniyojan_details['school'] = $request->school[$i];
$biniyojan_details['source'] = $request->source[$i];
$biniyojan_details['kriyakalap'] = $request->kriyakalap[$i];
//$biniyojan_details->debit_credit = $request->debit_credit[$i];
//$biniyojan_details->debit_credit_type = $request->debit_credit_type[$i];
$biniyojan_details['cash'] = $request->cash[$i];
$biniyojan_details->save();
}
}
return redirect()->back()->with('status', 'Inserted');
}
/////View Blade////////
<form method="POST" action="{{ route('bbcreate') }}">
#csrf
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<input type="date" placeholder="मिति" value="#php echo $today; #endphp" name="date" class="form-control" id="inputCity" required>
</div>
<div class="form-group col-md-2">
<select id="inputState" placeholder="" name="ab" class="form-control" required>
<option>2079-080</option>
<option>2078-079</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="inputState" name="school" class="form-control" required>
<option selected disabled>स्रोत पाउने संस्था </option>
#foreach ($school_array as $sch)
<option value="{{ $sch -> name }}">{{ $sch -> name}}</option>
#endforeach
</select>
</div>
</div>
<div id="form-field">
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<select id="source" name="source[]" class="form-control" required>
<option selected disabled value="">स्रोत</option>
<option>केन्द्र</option>
<option>प्रदेश</option>
<option>स्थानीय</option>
<option>अन्य</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="kriyakalap" name="kriyakalap[]" class="form-control" required>
<option selected disabled>क्रियाकलाप</option>
#foreach ($bini as $bi)
<option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option>
#endforeach
</select>
#foreach ($bini as $bi)
#endforeach
</div>
<div class="form-group col-md-2">
<select name="debit_credit[]" id="debit_credit" class="form-control" >
<option selected="selected" disabled>डेबिट / क्रेडिट</option>
</select>
</div>
<div class="form-group col-md-2">
<select name="debit_credit_type[]" id="debit_credit_type" class="form-control" >
<option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option>
</select>
</div>
<div class="form-group col-md-2">
<input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required>
</div>
<div class="form-group col-md-2">
<input type="button" class="btn btn-success" name="add" id="add" value="+">
</div>
</div>
</div>
<div class="form-row col-x1-3" style="justify-content:left ;">
<div class="form-group col-md-2">
<input type="text" placeholder="ब्यहोरा" name="behora" class="form-control" id="behora" required>
</div>
<div class="form-group col-md-2">
<input type="submit" id="submit" name="submit" value="राख्नुहोस्" class="btn btn-primary ">
</div>
#if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
{{-- message --}}
{!! Toastr::message() !!}
</div>
#endif
</div>
<div form-row col-x1-3 id="showdata" class="showdata">
<p class="show_data"></p>
<p id="showdata" class="showdata"></p>
</div>
</form>
//////jQuery For Repeat form////////[enter image description here][1]
<!-- form repeat -->
<script type="text/javascript">
$(document).ready(function() {
var html = '<span><div id="form-field"> <div class="form-row col-x1-3"> <div class="form-group col-md-2"> <select id="source" name="source[]" class="form-control" required> <option selected disabled value="">स्रोत</option> <option>केन्द्र</option> <option>प्रदेश</option> <option>स्थानीय</option> <option>अन्य</option> </select> </div> <div class="form-group col-md-2"> <select id="kriyakalap" name="kriyakalap[]" class="form-control" required> <option selected disabled>क्रियाकलाप</option> #foreach ($bini as $bi) <option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option> #endforeach </select> #foreach ($bini as $bi) #endforeach </div> <div class="form-group col-md-2"> <select name="debit_credit[]" id="debit_credit" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट</option> </select> </div> <div class="form-group col-md-2"> <select name="debit_credit_type[]" id="debit_credit_type" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option> </select> </div> <div class="form-group col-md-2"> <input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required> </div> <div class="form-group col-md-2"> <input type="button" class="btn btn-danger" name="remove" id="remove" value="-"> </div> </div> </div></span>';
var max = 5;
var x = 1;
$("#add").click(function() {
if (x <= max) {
$("#form-field").append(html);
x++;
}
})
$("#form-field").on('click', '#remove', function() {
$(this).closest('span').remove();
x--;
});
});
</script>
<!-- form repeat -->
As #aynber pointed at, you need to move the line $biniyojan_details = new BiniyojanDetails(); inside the loop so it initiate a new object for each iteration.
Another solution would be to insert all the entries in the same time(better performance). For that, we prepare the data to be inserted first
public function bbcreate(Request $request)
{
//dd($request->all());
$biniyojan_details = new BiniyojanDetails();
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->details_id;
$biniyojan->date = $request->date;
$biniyojan->ab = $request->ab;
$biniyojan->school = $request->school;
$biniyojan->behora = $request->behora;
$biniyojan->save();
$biniyojanDetailsToBeInserted = [];
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details = [];
$biniyojan_details['biniyojan_id'] = $biniyojan->id;
$biniyojan_details['school'] = $request->school[$i];
$biniyojan_details['source'] = $request->source[$i];
$biniyojan_details['kriyakalap'] = $request->kriyakalap[$i];
//$biniyojan_details['debit_credit'] = $request->debit_credit[$i];
//$biniyojan_details['debit_credit_type'] = $request->debit_credit_type[$i];
$biniyojan_details['cash'] = $request->cash[$i];
$biniyojanDetailsToBeInserted[] = $biniyojan_details;
}
}
if ($biniyojanDetailsToBeInserted) {
BiniyojanDetails::insert($biniyojanDetailsToBeInserted);
}
return redirect()->back()->with('status', 'Inserted');
}
Your code create only one row but the noticeable thing is that it create one row but with last data of the array.
Because you are not making object inside the loop it is outside of the loop so the loop runs on the same object and update its properties each time loop runs and save it.
Make object inside the loop so it make new object each time which means it will create new row each time instead of updating the same row.
There is a better way for this if you have same names of your array keys as database table columns.
Biniyojan::insert($request->data);
It works like this.
User::insert([
['name' => 'John', 'email' => 'john#example.com'],
['name' => 'Marina', 'email' => 'marina#example.com'],
]);
I have two text boxes that will have currency strings in them which I then need to sum from the two text boxes into the total text box
srv_trk
but, the result an error like this:
how to fix this?
total_price
how to delete rupiah so that srvPrice and trkPrice return to integer and the total is not error?
the code:
<script>
const rupiah = (number)=>{
return new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR"
}).format(number);
}
</script>
<script type="text/javascript">
$("#service").change(function(){
var element = $("option:selected", this);
var srvPrice = element.attr("srvPrice");
var trkPrice = $('#trkPrice').val();
var total = Number(trkPrice) + Number(srvPrice);
$('#srvPrice').val(rupiah(srvPrice));
$('#totalPrice').val(rupiah(total));
});
</script>
<script type="text/javascript">
$("#trucking").change(function(){
var element = $("option:selected", this);
var trkPrice = element.attr("trkPrice");
var srvPrice = $('#srvPrice').val();
var total = Number(trkPrice) + Number(srvPrice);
$('#trkPrice').val(rupiah(trkPrice));
$('#totalPrice').val(rupiah(total));
});
</script>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="service">Service Name</label>
<div class="col-sm-8">
<select class="form-control selectric" name="service_id" id="service">
<option srvPrice="" selected>Select an Option</option>
#foreach ($service as $s)
#if(old('service_id') == $s->service_id)
<option value="{{ $s->service_id }}" {{ old('service_id') == $s->service_id ? 'selected' : '' }} srvPrice="{{ $s->service_price }}">{{ $s->service_name }}</option>
#else
<option value="{{ $s->service_id }}" srvPrice="{{ $s->service_price }}">{{ $s->service_name }}</option>
#endif
#endforeach
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="trucking">Trucking</label>
<div class="col-sm-8">
<select class="form-control selectric" name="trucking_id" id="trucking">
<option trkPrice="" selected>Select an Option</option>
#foreach ($trucking as $t)
#if(old('trucking_id') == $t->trucking_id)
<option value="{{ $t->trucking_id }}" {{ old('trucking_id') == $t->trucking_id ? 'selected' : '' }} trkPrice="{{ $t->trucking_price }}">{{ $t->trucking_name }}</option>
#else
<option value="{{ $t->trucking_id }}" trkPrice="{{ $t->trucking_price }}">{{ $t->trucking_name }}</option>
#endif
#endforeach
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Service Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="srvPrice" required readonly>
<div class="invalid-feedback">
Please make a selection on Service Option.
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Trucking Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="trkPrice" readonly>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Total Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="totalPrice" required readonly>
<div class="invalid-feedback">
Please make a selection on Service Option.
</div>
</div>
</div>
You can simply achieve this with a single line of code by using String.replace() method along with parseInt()
Live Demo :
const servicePrice = 'Rp 550.000,00';
const truckingPrice = 'Rp 100.000,00';
const totalPrice = parseInt(servicePrice.replace('Rp', '').trim()) + parseInt(truckingPrice.replace('Rp', '').trim());
console.log(totalPrice);
Maybe you can just use the replace function on both strings before adding them up. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
So just variableName.replace("Rp ", "")
If the Number is written in text format e.g. number = "5", then you can use parseInt(number) to convert it to integer, then you will be able to treat it as a normal number.
Example:
let text = "5", x = 10;
console.log(parseInt(text) + x);
I have an angular application in that I have to show the dropdown list based on the picklist values.
.service.ts
public getLists() {
let baseUrl = `/endpoint`;
this._restfulService
.restfulGetData(baseUrl)
.subscribe(
(LookupData: LookupData) => {
if (LookupData) {
this.option1data = LookupData.option1Data;
this.option2data = LookupData.option2Data;
this.option3data = LookupData.option3Data;
this.option4data = LookupData.option4Data;
}
},
(err) => {
console.error(err);
}
);
}
.component.html
<div class="row">
<div class="form-group">
<div class="col-sm-3">
<label for="action"> <b>Category</b></label>
</div>
<div class="col-sm-7">
<select>
<option value="" disabled [selected]="true"></option>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
</div>
</div>
</div>
<div class="row>
<div class="form-group">
<div class="col-sm-3>
<label for="action"> <b>Lists</b></label>
</div>
<div class="col-sm-7">
<select>
<option value="" disabled [selected]="true"></option>
<option>
//In this dropdown I have to show the lists based on the selection of picklists
</option>
</select>
</div>
</div>
</div>
So In tha above code if I select option1 from the picklist I have to show the option1Data dropdownlist etc..
can anyone helpme on this
<div class="row">
<div class="form-group">
<div class="col-sm-3">
<label for="action"> <b>Lists</b></label>
</div>
<div class="col-sm-7">
<select>
<option disabled selected="true">Select pick</option>
<option *ngFor="let items of LookupData" [ngValue]="items.name">
{{ items.name }}
</option>
</select>
</div>
</div>
</div>
please put the above code in the HTML file. Hope this code will helpful to you
We have 3 select option, Country, State, City.
I have a php page where I would like to select a location from a list of countries, states, and cities. The page contains other data for user signup (name, email, etc) so I don't want to refresh the page or anything when the select boxes refresh. Currently, each of the select boxes just load the full list of countries, states, or cities. I want them to be chained so I don't have duplicate city names (same name in different states or countries).
I want to when select America, List of cities New York bring me.
<div class="col-md-2">
<div class="form-group">
<label for="country_id">Country</label>
<select id="country_id" name="country_id" class="form-control">
<option></option>
#foreach($countries as $country)
<option {{ optional(auth()->user()->country)->id == $country->id ? 'selected' : '' }} value="{{ $country->id }}">
{{ $country->name }}
</option>
#endforeach
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="state_id">State</label>
<select id="state_id" name="state_id" class="form-control">
</select>
<input type="text" name="state_name" value="{{ auth()->user()->state_name }}" id="state_id" class="form-control d-none">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="city_id">City</label>
<select id="city_id" name="city_id" class="form-control">
</select>
<input type="text" name="city_name" value="{{ auth()->user()->city_name }}" id="city_id" class="form-control d-none">
</div>
</div>
js
$(document).on('change', '#country_id', function() {
let country_id = $(this).val();
if(country_id == 1){
$('#city_id').find('#state_id');
}
let select = $('#state_id');
$.ajax({
type: 'get',
url: '{{ route('findIDCoubtry') }}',
data: {'id':country_id},
success: function(data){
select.html('');
for (var i = 0; i < data.length; i++){
select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
}
},
error: function(){
console.log('this is a error');
},
});
}).trigger('change');