How to populate dependable drop-down using Ajax and php
Yes, check following jquery ajax code.
In this example, if you change "Department" then it will populate the listing of "Name" dropdown.
$(document).on("change", '#department', function(e) { var department = $(this).val();
$.ajax({ type: "POST", data: {department: department}, url: 'admin/users/get_name_list.php', dataType: 'json', success: function(json) {
var $el = $("#name"); $el.empty(); // remove old options $el.append($("<option></option>") .attr("value", '').text('Please Select')); $.each(json, function(value, key) { $el.append($("<option></option>") .attr("value", value).text(key)); });
} });
});
populate dropdown using the response from Ajax POST call
You need to have the HTML tags for generating options and append them to select dropdown.
Try something like this in your success function in AjaxCall:
$("select#delivery_area").append('<option value=' + "data.district_val" + '>' + data.district_val + '</option>');
If your data length is more than one, then you need a for loop to generate each options and append each one to select dropdown.
Dynamic dependent dropdown select using ajax and jquery
Most probably the problematic part in your code is in the controller function:
public function delegation($id) {
$delegation = region::where('ville_id',$id)->pluck('region','id');
return json_encode($delegation);
}
In the above code it looks like that you are selecting data from the wrong Model or you select wrong data, since you would like to get back the cities(ville) based on the chosen region id. So this part of your code is confused or not fully clear from what you shared with us. But, since you have not shared all of the important parts of your code thus I would just like to share a working version of your codes below.
Within minutes I more or less duplicated your codes in my test. I created 2 Tables, regions and citys together with two Models: Region and City. I will detail it here not only for you but later developers who look for similar codes.
The regions table:
+-------------+------------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-------------+------------------+------+-----+---------+----------------+
| id | int(10) unsigned | NO | PRI | NULL | auto_increment |
| created_at | timestamp | YES | | NULL | |
| updated_at | timestamp | YES | | NULL | |
| region_name | varchar(191) | NO | | NULL | |
+-------------+------------------+------+-----+---------+----------------+
and the citys table (this table has a foreign key from regions table as region_id):
+------------+---------------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+------------+---------------------+------+-----+---------+----------------+
| id | bigint(20) unsigned | NO | PRI | NULL | auto_increment |
| created_at | timestamp | YES | | NULL | |
| updated_at | timestamp | YES | | NULL | |
| city_name | varchar(191) | NO | | NULL | |
| region_id | bigint(20) unsigned | NO | MUL | NULL | |
+------------+---------------------+------+-----+---------+----------------+
The models: App\Region Model in region.php
class Region extends Model{}
And App\City Model in city.php
file of course.
class City extends Model{}
I created 9 cities connected to 3 regions As sample data in the above tables .
In my web.php
file I placed these few lines of route definitions similarly to yours:
Route::get('/deleg/{id}', 'Drop1@getCities');
Route::get('/drop', 'Drop1@index');
Route::view('/ghof', 'ghof');
In the above route definition you can see that I called my controller Drop1
but it does not really matter how we name that.
So, in my Drop1.php
controller file I placed your two most important functions correctly. The first method will provide the regions from Region Model when the page is loaded and the second method will provide the cities from the City Model after someone chose a region and the ajax call will be triggered to get all of the cities of the chosen region.
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Region; // model
use App\City; // model
class Drop1 extends Controller
{
public function index()
{
$ville = Region::orderBy('id','asc')->get()->pluck('region_name','id');
return view ('dropdowntest',[ 'vi' => $ville ]);
}
public function getCities($region_id)
{
$delegation = City::where('region_id', $region_id)->pluck('city_name','id');
return json_encode($delegation);
}
// a lot of other methods...
}
I repaired your delegation()
method and renamed that to getCities()
actually, so nothing too special.
And finally your view/layout file almost the same as yours, I just renamed that to dropdowntest
, I did not change your layout and script relevantly at all.
So dropdowntest.blade.php
:
<h2>Here is a dropdown menu test</h2>
<form action="{{ '/ghof' }}" method="get">
{{ csrf_field() }}
<div class="container mine">
<select class="form-control form-control-lg search-field location" name="region" id="region">
<option selected></option>
@foreach($vi as $key => $value)
<option value="{{$key}}">{{$value}}</option>
@endforeach
</select>
<select type="text" class="form-control form-control-lg search-field location" name="ville" id="ville"></select>
<button class="search-btn" type="submit" id="search"> Recherche </button>
</div>
</form>
</body>
<script type="text/javascript">
$(document).ready(function () {
$('select[name="region"]').on('change', function() {
var ville_id = $(this).val();
if (ville_id) {
$.ajax({
url: '/deleg/' + ville_id,
type: 'GET' ,
dataType: 'json',
success: function(data) {
$('select[name="ville"]').empty();
$.each(data,function(key, value){
$('select[name="ville"]').append('<option value="'+value+'">'+ value +'</option>');
});
}
})
} else {
$('select[name="ville"]').empty();
}
});
});
</script>
<style>
.location {
width:30%;
float: left;
}
</style>
And I place here the result which shows that the above works without any problem:
I hope I have not left out anything and this is what you were looking for. Most probably you just need to check and repair you delegation()
method in your code and the whole thing will work as mine.
Related Topics
How to Check an Ip Address Is Within a Range of Two Ips in PHP
PHP Include Best Practices Question
How to Get All Class Names Inside a Particular Namespace
Manipulate a Url String by Adding Get Parameters
How to Send 500 Internal Server Error Error from a PHP Script
How to Preview an Image Before and After Upload
Android JSON Httpclient to Send Data to PHP Server with Httpresponse
Understanding MVC: Whats the Concept of "Fat" on Models, "Skinny" on Controllers
How to Convert a String to JSON Object in PHP
A Better Approach Than Storing MySQL Password in Plain Text in Config File
Inserting Google Calendar Entries with Service Account
Add Fee Based on Specific Payment Methods in Woocommerce
PHP Using Preg_Replace:"Delimiter Must Not Be Alphanumeric or Backslash" Error
Php.Exe' Is Not Recognized as an Internal or External Command, Operable Program or Batch File