Dynamic dropdown in laravel 5.8 - laravel

Question

here's what i want to happened
- First dropdown (Parent)
- Second dropdown (Child)
- The options on the second dropdown will depend on the selected value of the first dropdown.
I am using laravel 5.8.

Answer 1

In Your view
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control{{ $errors->has('state') ? ' is-invalid' : '' }}" onchange="dropdown(this.value);" name="state" id="state">
<option>--select state--</option>
<option value="Kerala">Kerala</option>
<option value="Karnataka">Karnataka</option>
<option value="Tamil Nadu">Tamil Nadu</option>
</select>
<select class="form-control{{ $errors->has('district') ? ' is-invalid' : '' }}" name="district" id="district">
<option>Please choose state from above dropdown</option>
</select>
<script >
function dropdown(msg){
var state=msg;
$.ajax({
url: 'getdistrict/'+state,
type: 'get',
dataType: 'json',
success: function(response){
$("#district").empty();
var len = 0;
if(response['data'] != null){
len = response['data'].length;
}
if(len > 0){
// Read data and create <option >
for(var i=0; i<len; i++){
var id = response['data'][i].id;
var name = response['data'][i].name;
var option = "<option value='"+name+"'>"+name+"</option>";
$("#district").append(option);
}
}
}
});
}
In your controller
public function district($id)
{
$userData['data'] = DB::table('alldistricts')
->where('state', $id)
->orderBy('name', 'asc')
->get();
echo json_encode($userData);
exit;
}
In your web.php
Route::get('/getdistrict/{id}','RegistrationController#district')->name('getdistrict');

Answer 2

To achieve this you must know front end script like Vue js or at least native javascript. I'll show how to achieve this using vue js and axios package and native js and ajax.
Vue js and axios:
Documentation:
1)https://vuejs.org (for vue js)
2)https://www.npmjs.com/package/axios (for axios package)
include this line in you header.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
Note: I used Vue js cdn for development mode. Make sure to change to production mode on live. Check the documentation for further.
Then add this in the form:
<form method='post' action="http://example.com/location" id="developers">
<select name="developer_type" v-on:change="getLanguages" v-model="developerType">
<option disabled> Select Developer Type </option>
<option value="front"> Front-End Developer </option>
<option value="back"> Back-End Developer </option>
<option value="full"> Full Stack Developer </option>
</select>
<select name="Coding_language">
<option disabled v-if="developerType!=null"> Select Developer Type First </option>
<option disabled v-else="developerType!=null"> Select Coding Language </option>
<option v-for="lang in codingLaguanges" value="lang"> #{{lang}} </option>
</select>
</form>
Note: use #{{}} if only you use Laravel blade as your template engine Otherwise use only {{}}
Then add this on footer script
let developerForm = new Vue({
el:'#developers',
data:{
developerType:null,
codingLanguages:null
},
methods:{
getLanguages: function () {
axios
.post('/developers/getLanguages',{
type: developerForm.developerType
})
.then(response => (
developerForm.codingLanguages = response.data.languages
));
}
}
});
Note:I have used v-on:change and v-model in select instead of using watcher ands-model because this concept will be easier if you are new to vue js, Otherwise use Watcher itself. Check Vue js Documentation. However Both will work in this case.
In .post give you correct url to get result.
then define your route
Route::post('/developers/getLanguages', ['as'=>'dev.getLang','uses'=>'web\DevController#getLanguages']);
Note this is laravel part. you ca see Documentation in https://laravel.com
then in your DevController add this method
public function getLanguages(Request $request){
//do something to fetch result from db. Let us consider user has selected backend as developer type and there is array named Languages and it contains elements named php, python and java. i.e. $languages = ['php','python','java'].
return response()->Json(['languages'=>$languages],200);
}
Note: This will be your method for Controller to know detailed about controller check laravel documentation mentioned in previous note. Here you can retrieve the variable value from db also. but I used only sample values. In return I used array in json because you can n number of variables in that array(For example you can use statusCode to identify your error in future and much more.). Then make sure the name of the key in json array and name of the object in axios while retrieving is same. And I used status code as 200 because the browser take response of the request is successful. if you use 400 browser take response of the request is error.
This is the easiest method you can achieve.
You can also use jquery ajax and jquery or native javascript and javascript ajax to achieve this. But it has some complexity and limitation.
If you need code for native js or jQuery comment it and I will post it