Populate dropdown based on another dropdown selected value in laravel - edit form

Question

I found how to accomplish this on another site and I got it working. My issue is though that I need to use it in my edit form (preferably in the same form as my create form, since my create and edit views use the same form). When I go to my edit page, the "Section" dropdown value is selected as it should be. But the "Subsection" is not, because ofcourse I did not click it. Probably it's a fix too easy for me to see, but I am not quite good with javascript. I basically need the second dropdown (the subsection one) to show the correct options based on which "section" (first dropdown) is selected, on my edit view.

Section Model:

public function subsections()
{
    return $this->hasMany('App\Subsection');
}

Subsection Model:

public function section()
{
    return $this->belongsTo('App\Section');
}

View:

{!! Form::select('section_id', [null=>'-- Select Section --'] + $sections, null, array('id' => 'section')) !!}

<select id="subsection" name="subsection_id" class="select">
    <option>-- First Select Section --</option>
</select>

From my controller: $sections = Section::lists('section', 'id');

Script:

<script>
$(document).ready(function($){
    $('#section').change(function(){
        $.get("{{ url('api/dropdown')}}", 
        { option: $(this).val() }, 
        function(data) {
            $('#subsection').empty(); 
            $.each(data, function(key, element) {
                $('#subsection').append("<option value='" + key +"'>" + element + "</option>");
            });
        });
    });
});
</script>

Route:

Route::get('api/dropdown', function(){
    $id = Input::get('option');
    $subsections = Section::find($id)->subsections;
    return $subsections->lists('subsection', 'id');
});

Answer 1

If you just want to select the first option in jquery , you can add :

$('#subsection option:eq(1)').prop('selected', true);

Or else if you want to select a particular value, you can do that by

$('#subsection option[value="value_to_be_selected"]').prop('selected', true);

Use this after you have appended all the values to the subsection

Answer 2

In my controller I added:

    $subsections = Subsection::where('section_id', '=', $transaction->section_id)->orderBy('subsection', 'asc')->lists('subsection', 'id');

And in my view I did this:

    @if(isset($transaction))
    {!! Form::select('subsection_id', [null=>'-- Select Subsection --'] + $subsections, null, array('class' => 'select', 'id' => 'subsection')) !!}
    @else
        <select id="subsection" name="subsection_id" class="select">
            <option>-- First Select Section --</option>
        </select>
    @endif

Problem solved :)

Answer 3

So, what we will do is initially we will send value to the dependent drop-down as
"<option value="">Select Something</option>" and when returning on error create complete drop-down with selected as below value and return, this will reduce lots of javascript calls.
Controller:

if($error){
//create get array of second drop-down, suppose $second_drop
// create complete second drop-down like
$selectbox="";
foreach($second_drop as $option){
            $selectbox.="<option value='". $option->id."'";
            if($request->option2==$ $option->id){
                $selectbox.=" selected ";
            }

            $selectbox.=">".$option->value."</option>";
        }
}
return view('routename', ['selectbox2' =>   $selectbox]);

View:

<select id="subsection" name="subsection_id" class="select">
    {!! $selectbox !!}
</select>