Three Dependent Dropdowns Issue

Question

I have a form country, state and area that looks like the following:

I have a script that allows showing what kind of state (i.e. second dropdown) that is depending on the country selection (first dropdown). I have no problem with the first and second dropdown.

However, the problem comes when I want to include the third dropdown for the area that depends on what country and state is selected. This is the script I have for the area. The country_id and state_id are getting the same value which is apparently incorrect.

After spending some times on Google, I got the correct value for the country_id by changing the the following:

var country_id = e.target.value; to var country_id = $('select[name="country"]').val();

The area selection is not listing any data but this .

I got the following details from the Chrome's inspect->preview:

Collection {#261
  #items: array:2 [
    0 => Area {#260
      #fillable: array:3 [
        0 => "area"
        1 => "state_id"
        2 => "country_id"
      ]
      +timestamps: false
      #connection: null
      #table: null
      #primaryKey: "id"
      #perPage: 15
      +incrementing: true
      #attributes: array:2 [
        "id" => 3
        "name" => "Corvallis"
      ]
      #original: array:2 [
        "id" => 3
        "name" => "Corvallis"
      ]
      #relations: []
      #hidden: []
      #visible: []
      #appends: []
      #guarded: array:1 [
        0 => "*"
      ]
      #dates: []
      #dateFormat: null
      #casts: []
      #touches: []
      #observables: []
      #with: []
      #morphClass: null
      +exists: true
      +wasRecentlyCreated: false
    }
    1 => Area {#270
      #fillable: array:3 [
        0 => "area"
        1 => "state_id"
        2 => "country_id"
      ]
      +timestamps: false
      #connection: null
      #table: null
      #primaryKey: "id"
      #perPage: 15
      +incrementing: true
      #attributes: array:2 [
        "id" => 7
        "name" => "Portland"
      ]
      #original: array:2 [
        "id" => 7
        "name" => "Portland"
      ]
      #relations: []
      #hidden: []
      #visible: []
      #appends: []
      #guarded: array:1 [
        0 => "*"
      ]
      #dates: []
      #dateFormat: null
      #casts: []
      #touches: []
      #observables: []
      #with: []
      #morphClass: null
      +exists: true
      +wasRecentlyCreated: false
    }
  ]
}

and Chrome's inspect->response:

 Collection {#261
  #items: array:2 [
    0 => Area {#260
      #fillable: array:3 [
        0 => "area"
        1 => "state_id"
        2 => "country_id"
      ]
      +timestamps: false
      #connection: null
      #table: null
      #primaryKey: "id"
      #perPage: 15
      +incrementing: true
      #attributes: array:2 [
        "id" => 3
        "name" => "Corvallis"
      ]
      #original: array:2 [
        "id" => 3
        "name" => "Corvallis"
      ]
      #relations: []
      #hidden: []
      #visible: []
      #appends: []
      #guarded: array:1 [
        0 => "*"
      ]
      #dates: []
      #dateFormat: null
      #casts: []
      #touches: []
      #observables: []
      #with: []
      #morphClass: null
      +exists: true
      +wasRecentlyCreated: false
    }
    1 => Area {#270
      #fillable: array:3 [
        0 => "area"
        1 => "state_id"
        2 => "country_id"
      ]
      +timestamps: false
      #connection: null
      #table: null
      #primaryKey: "id"
      #perPage: 15
      +incrementing: true
      #attributes: array:2 [
        "id" => 7
        "name" => "Portland"
      ]
      #original: array:2 [
        "id" => 7
        "name" => "Portland"
      ]
      #relations: []
      #hidden: []
      #visible: []
      #appends: []
      #guarded: array:1 [
        0 => "*"
      ]
      #dates: []
      #dateFormat: null
      #casts: []
      #touches: []
      #observables: []
      #with: []
      #morphClass: null
      +exists: true
      +wasRecentlyCreated: false
    }
  ]
}

It seems like it is showing the correct areas from the attributes, but just isn't displaying them out under the area selection. What did I do wrong?

varad mayee · Accepted Answer

Basically the procedure you have to follow is the first country id you have to send then take its respective cities until location box will be disabled then send only state id and fetch locations from that and you will get the proper result.Please refer below link

http://www.codexworld.com/dynamic-dependent-select-box-using-jquery-ajax-php/

Three Dependent Dropdowns Issue

Answers (1)

Related Questions