CODEWITHSUNDEEP
phplaravel
Arman Bagheri
Arman Bagheri

Reputation: 630

how to create relational select option ajax in laravel 5.2

We want to create a relational select option with ajax Receive data from mysql on laravel 5.2.

We have three select options: "type", "brand" and "product name".

When type is selected, the related brands should be loaded and after that, when a brand is selected, the related product names should be loaded in the last select.

Upvotes: 1

Views: 8370

Answers (1)

Shahrokhian
Shahrokhian

Reputation: 1114

I'll try to explain with an example.

let's consider you have three tables named ( countries, states, cities ) and assume you are using jquery.

countries :

id | name          | code | **
--------------------------------
 1 | united states | US   | etc

states :

id | country_id  | name
--------------------------------
 1 | 1           | Texas

cities :

id |state_id | name
--------------------------------
 1 | 1       | Houston

so you will have three models preferably named as Country, State, City

we need two routes to load states and cities

Route::post( '/get/states', 'WorldController@states' )->name( 'loadStates' );
Route::post( '/get/cities', 'WorldController@cities' )->name( 'loadCities' );

and in our Controller ( here WorldController ) we have two methods :

function states( Request $request )
{
      $this->validate( $request, [ 'id' => 'required|exists:countries,id' ] );
      $states = State::where('country_id', $request->get('id') )->get();
      //you can handle output in different ways, I just use a custom filled array. you may pluck data and directly output your data.
      $output = [];
      foreach( $states as $state )
      {
         $output[$state->id] = $state->name;
      }
      return $output;
}
function cities( Request $request )
{
      $this->validate( $request, [ 'id' => 'required|exists:states,id' ] );
      $cities = City::where('state_id', $request->get('id') )->get();
      $output = [];
      foreach( $cities as $city )
      {
         $output[$city->id] = $city->name;
      }
      return $output;
}

and we will have three select options like this :

<select name="country" id="country">
   @foreach( Country::get() as $country )
      <option value="{{ $country->id }}">{{ $country->name }}</option>
   @endforach
</select>
<select name="state" id="state"></option>
<select name="city" id="city"></option>

as we assumed you are using jquery we update our select options like this :

<script>
$(function(){
    $('#country').change(function(){
       $("#state option").remove();
       $("#city option").remove();
       var id = $(this).value();
       $.ajax({
          url : '{{ route( 'loadStates' ) }}',
          data: {
            "_token": "{{ csrf_token() }}",
            "id": id
            },
          type: 'post',
          dataType: 'json',
          success: function( result )
          {
               $.each( result, function(k, v) {
                    $('#state').append($('<option>', {value:k, text:v}));
               });
          },
          error: function()
         {
             //handle errors
             alert('error...');
         }
       });
    });
    $('#state').change(function(){
       $("#city option").remove();
       var id = $(this).value();
       $.ajax({
          url : '{{ route( 'loadCities' ) }}',
          data: {
            "_token": "{{ csrf_token() }}",
            "id": id
            },
          type: 'post',
          dataType: 'json',
          success: function( result )
          {
               $.each( result, function(k, v) {
                    $('#city').append($('<option>', {value:k, text:v}));
               });
          },
          error: function()
         {
             //handle errors
             alert('error...');
         }
       });
    });
});
    </script>

Upvotes: 6

Related Questions