Clash Royale CLAN TAG#URR8PPP

How to set multiple events (on change) with multiple combo boxes using javascript

I have a small case study with Laravel project. The Idea is very simple; I have 3 combo boxes with related information each other. I need to show the parent-child information based on related combo box that is selected. I decided to use Javascript because it can load information so fast.

Select Kingdom:

Select Species:

Slect name:

Here is my codes:

View

@extends('app')

@section('content')
<div class="row">
<div class="col-md-4">
!! Form::label('kingdom', 'Select Kingdom') !!
!! Form::select('id', $kingdom ,null , array('id'=>'kingdom','class' => 'form-control')) !!
</div>
</div>
<div class="row">
<div class="col-md-4">
!! Form::label('species', 'Select Species') !!
!! Form::select('id', $species ,null , array('id'=>'species','class' => 'form-control')) !!
</div>
</div>
<div class="row">
<div class="col-md-4">
!! Form::label('name', 'Select Name') !!
!! Form::select('id', $name ,null , array('id'=>'name','class' => 'form-control')) !!
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function()
$('#kingdom').on('change', function(e)
var id_kingdom = e.target.value;
$.get(' url('kingdom')/'+id_kingdom, function(data)
console.log(id_kingdom);
console.log(data);
$('#species').empty();
$.each(data, function(index, element)
$('#species').append("<option>"+element.name_info+" </option>");
);
);
);

$('#species').on('change', function(e)
var id_species = e.target.value;
$.get(' url('species')/'+id_species, function(data)
console.log(id_species);
console.log(data);
$('#name').empty();
$.each(data, function(index, element)
$('#name').append("<option>"+element.name_info+"</option>");
);
);
);
);
</script>
@endsection


Controller

namespace AppHttpControllers;

use IlluminateHttpRequest;

use AppHttpRequests;

use AppModelKingdom;
use AppModelSpecies;
use AppModelName;

class PagesController extends Controller

public function home()
$kingdom=ModelKingdom::pluck('name_info', 'id');
$species=ModelSpecies::pluck('name_info', 'id','id_kingdom');
$name=ModelName::pluck('name_info', 'id','id_kingdom','id_species');

return view('home', compact('kingdom', 'species', 'name'));


public function SpeciesAjax($id_kingdom)
if($id_kingdom==0)
$species = ModelSpecies::all();
else
$species = ModelSpecies::where('id_kingdom','=',$id_kingdom)->get();

return $species;


public function NameAjax($id_species)
if($id_species==0)
$name = null;
else
$name = ModelName::where('id_species','=',$id_species)->get();

return $name;





Route

Route::get('/', 'PagesController@home');

Route::get('/kingdom/id_kingdom','PagesController@SpeciesAjax');

Route::get('/species/id_species','PagesController@NameAjax');


Okay, up to this point I guess everything is properly set, but when I ran into the browser, something happen.

Scenario 1:

When I select one of the Kingdom, the Species is shown correctly. For example when I select Animal, the species are Fish and Mamals. But when I select Fish, the value of combo box 3 (Name) were disappeared(null).

Scenario 2:

I select first the species and the Name values were shown correctly. For example I select Mammals so the Name values are Cow and Elephant. Then I go for Kingdom, so the species are shown correctly, BUT when I select one of them, the Name value were disappeared(Again).

What did just happen? I just want to consecutively select combo boxes and display related value. Please help!

NameAjax($id_species)

$name = null;

$name = "sample_animal"

sample_animal

$id_species

0

1 Answer
1

The issue seems to be the following, if $id_species is 0 you are setting $name to null. Instead change the function to the following

public function NameAjax($id_species = null)
if(isnull($id_species))
$name = null;
else
$name = ModelName::where('id_species','=',$id_species)->get();

return $name;



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.