Three Dependent Dropdowns Issue

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

<div class="form-group{{ $errors->has('country') ? ' has-error' : '' }}">
            <label for="inputCountry" class="col-lg-2 control-label">Country*</label>
            <div class="col-lg-6">
                <select class="form-control" name="country" id="country">
                    <option value="">Select a country</option>
                    @foreach ($countries as $country)
                        <option value="{{ $country->id }}">{{ $country->country }}</option>
                    @endforeach
                </select>
            </div>
</div>

<div class="form-group{{ $errors->has('state') ? ' has-error' : '' }}">
            <label for="state" class="col-lg-2 control-label">State*</label>
            <div class="col-lg-6">
                <select class="form-control" name="state" id="state">
                </select>
            </div>
 </div>

<div class="form-group{{ $errors->has('area') ? ' has-error' : '' }}">
            <label for="inputPassword" class="col-lg-2 control-label">Area*</label>
            <div class="col-lg-6">
                <select class="form-control" name="area" id="area">
                </select>
            </div>
</div>

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.

<script>
$('#state').on('change', function(e) {
        console.log(e);

        var country_id = e.target.value;              <---- not sure what I should change for this.
        var state_id = e.target.value;

        //ajax

        $.get("/page/ajax?country_id="+country_id+"&state_id="+state_id, function (data) {
            //console.log(data);
            $('#area').empty();
            $('#area').append('<option>Select an area</option>');
            $.each(data, function(index, areaObj) {

                $('#area').append('<option value="'+areaObj.id +'">'+ areaObj.name +'</option>');
            });

        });

    });
</script>

Thanks.

DarkSpirit

9 years ago

Level 1

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 <option>Select an area</option>.

I got the following details from the Chrome's inspect:

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?

Please or to participate in this conversation.