如何使用javascript设置多个组合框的多个事件（在更改时）

Question

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:

• Please select -
  1. Animal
  2. Plant

Select Species:

• Please select -
  1. Fish
  2. Mamals
  3. Flower

Slect name:

• Please select -
  1. Salmon
  2. Cow
  3. Elephant
  4. Orchid
  5. Lily
  6. Rose

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 App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

use App\ModelKingdom;
use App\ModelSpecies;
use App\ModelName;

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!

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;
}